Stil dinamic - control CSS cu JavaScript. Operații asupra claselor și stilurilor de elemente în JavaScript Modificarea proprietăților css folosind javascript

Ultima actualizare: 1/11/2015

Există în principal două abordări pentru a lucra cu proprietățile stilului elementului în JavaScript:

Schimbarea proprietății stilului

Modificarea valorii atributului de clasă

proprietate de stil

Proprietatea style reprezintă un obiect complex de control al stilului și se mapează direct la atributul de stil al unui element html. Acest obiect conține un set de proprietăți CSS: proprietate element.style.CSS. De exemplu, să setăm culoarea fontului:

Var root = document.documentElement; // setează stilul root.style.color = "albastru"; // obține valoarea stilului document.write(root.style.color); //albastru

În acest caz, numele proprietății culoare este același cu proprietatea css. În mod similar, am putea seta culoarea folosind css:

Html (culoare: albastru; )

Cu toate acestea, o serie de proprietăți CSS au o cratimă în numele lor, de exemplu, font-family . JavaScript nu folosește o cratimă pentru aceste proprietăți. Doar prima literă care vine după cratima este convertită în majuscule:

Var root = document.documentElement; root.style.fontFamily = "Verdana";

proprietatea className

Folosind proprietatea className, puteți seta atributul class al unui element html. De exemplu:

.blueStyle( color:blue; font-family:Verdana; ) .article( font-size:20px; ) Titlul articolului

Primul paragraf

Al doilea paragraf

var articleDiv = document.querySelector("div.article"); // setarea unei noi clase articleDiv.className = "blueStyle"; // obțineți numele clasei document.write(articleDiv.className);

Folosind clase, nu trebuie să configurați fiecare proprietate css folosind proprietatea style.

Dar trebuie luat în considerare faptul că valoarea anterioară a atributului de clasă este ștearsă. Prin urmare, dacă trebuie să adăugăm o clasă, trebuie să combinăm numele acesteia cu clasa veche:

ArticleDiv.className = articleDiv.className + „blueStyle”;

Și dacă trebuie să eliminați complet toate clasele, puteți atribui un șir gol proprietății:

ArticleDiv.className = "";

proprietate classList

Am discutat mai sus cum să adăugați clase la un element, dar pentru a gestiona mai multe clase este mult mai convenabil să folosiți proprietatea classList. Această proprietate reprezintă un obiect care implementează următoarele metode:

add(className) : adaugă o clasă className

remove(className): elimină clasa className

toggle(className): Comută clasa elementului la className. Dacă nu există o clasă, atunci este adăugată, dacă există, atunci este eliminată

De exemplu:

Var articleDiv = document.querySelector("div.article"); // eliminați clasa articleDiv.classList.remove("articol"); // adaugă clasa articleDiv.classList.add("blueStyle"); // comută clasa articleDiv.classList.toggle("articol");

În acest articol, ne vom uita la diferite metode de lucru cu clase și stiluri de elemente. Să facem cunoștință cu classList și proprietățile de stil și cu exemple de utilizare a acestora pentru a gestiona clasele și, respectiv, stilurile de elemente de pe pagină.

Gestionarea claselor de elemente

Prima modalitate de a interacționa cu clasele de elemente este utilizarea proprietății className DOM.

Această proprietate este o reflectare a atributului de clasă din DOM. Proprietatea DOM className nu a fost numită clasă din cauza faptului că anterior în JavaScript, cuvintele rezervate nu puteau fi folosite pentru a denumi proprietățile obiectelor. Dacă nu știți ce sunt proprietățile DOM și cum diferă acestea de atribute, atunci puteți citi despre asta în acest articol.

Un exemplu în care vom efectua diverse operații pe o clasă de elemente folosind proprietatea DOM className:

var elem = document.querySelector("#alerta"); // adaugă o clasă la elementul elem.className = "alertă"; // "alertă" // schimbă clasa elementului elem.className = "avertisment-alertă"; // "alert-warning" // obține valoarea clasei și o stochează în className var classElem = elem.className; // "alert-warning" // eliminați clasa din elementul elem.className = ""; // ""

A doua modalitate de a efectua operațiuni asociate cu clasa unui element este utilizarea metodelor de manipulare a atributelor.

Un exemplu în care vom efectua aceleași acțiuni ca și codul de mai sus, dar folosind metode de gestionare a atributelor:

var elem = document.querySelector("#alerta"); // adaugă o clasă la elementul elem.setAttribute("class", "alert"); // schimba clasa elementului elem.setAttribute("class", "alert-warning"); // obțineți valoarea clasei și stocați-o în className var classElem = elem.getAttribute("class"); // "alerta-avertisment" // elimina clasa din elementul elem.removeAttribute("clasa");

Proprietatea DOM className și atributul class sunt întotdeauna sincronizate între ele, ceea ce înseamnă că atunci când una se schimbă, se schimbă și cealaltă.

De exemplu, determinarea prezenței oricărei clase specifice într-un element folosind metodele de mai sus nu se mai poate face așa simplu. Acest lucru va necesita scrierea unui cod.

Un exemplu în care verificăm dacă un element are clasa content__show:

... var elem = document.querySelector("#content");

if ((" " + elem.className + " ").indexOf(" content__show ") > -1) ( // elementul are clasa content__show) else ( // elementul nu are clasa content__show)

Dar pe lângă această situație, mai sunt și altele. De exemplu, când trebuie să adăugați o anumită clasă la un element sau să o eliminați. Pentru a efectua aceste și alte acțiuni foarte simplu, elementul are o proprietate DOM classList specială pentru aceste cazuri.

proprietate classList

Proprietatea classList este un obiect special (DOMTokenList) care conține metode pentru efectuarea diferitelor operații asupra claselor elementului.

• metode classList:
• .add(className1[,className2,...]) - adaugă una sau mai multe clase specificate la element. Dacă un element are deja această clasă, nu va fi adăugat la el.
• .remove(className1[,className2,... ]) - elimină una sau mai multe clase specificate dintr-un element. Dacă elementul nu are clasa pe care doriți să o eliminați, atunci nu va fi luată nicio acțiune.
• .contains(className) – verifică dacă un element are o clasă; returnează adevărat sau fals ca răspuns.

.toggle(className [,flag]) - comută numele de clasă specificat al elementului, i.e. dacă elementul are această clasă, atunci o elimină; adaugă altfel. Al doilea parametru (steagul) este opțional. În mod implicit, este nedefinit. Dacă îl setați la true sau false , va funcționa ca metoda add or remove, de ex. fie adăugați o clasă la un element sau eliminați una din acesta.

// obțineți elementul cu id = "sidebar" var sideBar = document.querySelector("#sidebar"); // comută clasa hidden-xs a elementului, adică dacă elementul îl are, atunci eliminați-l; iar dacă această clasă nu există, atunci adăugați-o la ea sideBar.classList.toogle("hidden-xs"); // adaugă trei clase suplimentare la sideBar element.classList.add("col-xs-6","col-sm-4","col-md-3"); // elimină clasa hidden-xs din sideBar element.classList.remove("hidden-xs"); // verifică dacă elementul are o clasă hidden-lg și dacă da, adaugă un alt hidden-md la el if (sideBar.classList.contains("hidden-lg") ( myID.classList.add("hidden-md" ; )

Obiectul classList este o pseudo-matrice, de exemplu. poate fi repetat ca o matrice.

Un exemplu în care vom repeta peste toate clasele classList:

... var content = document.querySelector(".content"); // Opțiunea nr. 1. Folosind bucla for // classList.length - numărul de clase pentru un element // clasele din classList sunt numărate de la 0 for (var i = 0, length = content.classList.length; i< length; i++) { // i - индекс класса в classList // выведем класс в консоль console.log(content.classList[i]); // или так (с помощью метода item) console.log(content.classList.item(i)); } // если мы хотим получить класс по его индексу, а указали в качестве значения индекса число, которое больше, чем (количества элементов - 1) в classList (т.к. отсчет ведётся с 0), то в этом случае получим в качестве результата undefined console.log(content.classList); // undefined // Вариант №2. С помощью цикла for..of for (let className of content.classList) { // выведем класс в консоль console.log(className); }

Proprietatea classList este acceptată de toate browserele moderne. Dacă aveți nevoie de suport pentru browsere foarte vechi (de exemplu, Internet Explorer 8, 9), atunci în acest caz puteți utiliza un fel de polyfill.

Stiluri de elemente

În DOM, fiecare element are o proprietate de stil cu ajutorul căruia îi putem controla stilurile. Valoarea acestei proprietăți este un obiect numai pentru citire. Setarea stilurilor pentru un element în acest caz se face prin adăugarea de proprietăți adecvate acestuia.

Un exemplu despre cum puteți adăuga stiluri unui element prin proprietatea stilului DOM:

Square var square = document.querySelector(".square"); square.style.width = "170px"; square.style.height = "170px"; square.backgroundColor = „verde”;

Numele proprietăților obiectului de stil sunt de obicei aceleași cu numele proprietăților CSS. Singurele excepții sunt acele proprietăți CSS care folosesc o cratimă. De exemplu, culoarea de fundal. În acest caz, cratima și litera care o urmează sunt înlocuite cu majuscule. De exemplu, proprietatea CSS background-color pentru un obiect de stil ar fi specificată ca backgroundColor . Și, de exemplu, o proprietate CSS cu un prefix de browser -webkit-border-radius - ca WebkitBorderRadius.

Eliminarea stilurilor

De exemplu, să setăm corpul la o culoare de fundal:

Document.body.style.backgroundColor = "#eee";

Dacă acum trebuie să eliminăm acest stil, atunci pentru a face acest lucru trebuie pur și simplu să îi atribuim un șir gol:

Document.body.style.backgroundColor = "";

Exemple de utilizare a proprietății de stil DOM pentru a seta stiluri pentru elemente.

// setați culoarea textului la roșu pentru elementul cu id = "introtext" folosind stilul document.querySelector("#introtext").style.color = "red"; // setați toate p elementele din pagină folosind stil pentru a seta culoarea textului la verde var paragraphs = document.querySelectorAll("p"); pentru (var i = 0, lungime = paragrafe.lungime; i< length; i++) { paragraphs[i].style.backgroundColor = "green"; } // выведем в консоль все CSS свойства элемента с идентификатором "introtext" var styleElem = document.querySelector("#introtext").style; for (var i = 0, length = styleElem.length; i < length; i++) { console.log(styleElem[i]); }

proprietatea cssText

Pe lângă setarea individuală a stilurilor pentru un element, le putem seta imediat folosind proprietatea specială style.cssText . Acest lucru se face prin atribuirea acestei proprietăți a unui șir format dintr-un set de stiluri separate prin punct și virgulă. Aceste. Acest lucru se face într-un mod similar cu modul în care setăm stiluri în atributul stil HTML.

Un exemplu în care setăm stilurile „font-size:40px; color:blue;” elemente cu clasa intro:

//obține elemente cu clasa intro var intro = document.querySelectorAll("intro"); //setează „dimensiunea fontului: 40px; culoare: albastru;” toate elementele din colecție conținute în intro for (var i = 0, length = intro.length; i< length; i++) { intro[i].style.cssText = "font-size:40px; color:blue;"; }

Trebuie să fiți atenți când setați stiluri folosind proprietatea style.cssText. Acest lucru se datorează faptului că, atunci când este setată, această proprietate elimină toate stilurile pe care le are elementul. Aceste. cele pe care le setăm pentru el folosind atributul style și în proprietatea DOM corespunzătoare.

Puteți efectua o operație similară cu cea efectuată de proprietatea style.cssText folosind metoda setAttribute.

De exemplu:

//obține primul element cu clasa de intro var info = document.querySelector("info"); //setează-l la stilul „margin: 10px; padding: 10px; border: 1px continu green;” info.setAttribute("stil", "marja: 10px; umplutură: 10px; chenar: 1px verde continuu;");

Misiuni

1. Scrieți un script folosind classList pentru a seta un element cu clasa text la trei clase: dimensiune-40 , culoare-roșu și bg-galben:

.size-40 ( font-size: 40px; ) .color-red (culoare: red; ) .bg-yellow ( fundal: galben; )

Un text...

2. Scrieți codul pentru a seta stilul „width: 180px; height: 180px;” toate elementele de pe pagină cu o clasă care începe cu cuvintele bloc- .

Descriere

Proprietatea style reprezintă atributul de stil global al unui element HTML. Valoarea proprietății de stil este un obiect CSSStyleDeclaration, care conține toate informațiile de stil ale elementului HTML adăugate elementului prin atributul de stil global. Proprietățile obiectului CSSStyleDeclaration sunt proprietăți CSS.

Pentru a modifica sau adăuga stiluri noi la un element HTML, trebuie să utilizați o proprietate al cărei nume se va potrivi cu numele proprietății CSS a cărei valoare doriți să o modificați. De exemplu, pentru a afișa conținutul text al unui element cu font roșu cursiv, puteți rula următoarele instrucțiuni:

Elem.style.fontStyle = „cursiv”; elem.style.color = „roșu”;

Rețineți că toate valorile proprietăților obiectului CSSStyleDeclaration trebuie să fie specificate ca șiruri. De exemplu, într-o foaie de stil sau într-un atribut de stil ați putea scrie:

Culoare: roșu; dimensiunea fontului: 50px; text-decor: subliniere;

Pentru a face același lucru în JavaScript, trebuie să includeți toate valorile între ghilimele:

Elem.style.color = „roșu”; elem.style.fontSize = "50px"; elem.style.textDecoration = „subliniere”;

Rețineți că punctele și virgulă nu sunt incluse în valorile șirului. Punctele și virgulă utilizate în CSS nu sunt necesare în valorile șirului setate folosind JavaScript.

Multe proprietăți CSS, cum ar fi decorul textului, conțin o cratimă în numele lor. În JavaScript, cratima este interpretată ca operator minus, astfel încât declarația de mai jos nu va funcționa:

Elem.style.text-decoration = „supralinie”;

Astfel, numele proprietăților obiectului CSSStyleDeclaration sunt ușor diferite de numele proprietăților CSS reale. Dacă un nume de proprietate CSS conține cratime, atunci numele proprietății obiectului CSSStyleDeclaration este format prin eliminarea tuturor cratimelor și scrierea cu majuscule a litera imediat după fiecare cratimă. De exemplu, proprietatea CSS de tip listă în JavaScript ar arăta ca listStyleType.

În plus, atunci când o proprietate CSS, cum ar fi float, are un nume care se potrivește cu un cuvânt rezervat JavaScript, numele este prefixat cu „css” pentru a crea un nume de proprietate valid. Adică, pentru a citi sau a modifica valoarea proprietății CSS float, ar trebui să utilizați proprietatea cssFloat.

Când utilizați proprietățile unui obiect CSSStyleDeclaration pentru a citi informații de stil despre un element HTML, numai acele proprietăți ale căror valori au fost stabilite anterior de un script sau specificate folosind atributul style vor returna informații semnificative.

Stilul elementului inline în JavaScript este util numai pentru setarea stilurilor. Pentru a obține informațiile de stil ale unui element (valorile tuturor proprietăților CSS setate pentru element), trebuie să utilizați metoda window.getComputedStyle().

Exemplu de titlu de document

Acesta este un paragraf.

Schimbați textul

funcția foo() ( var x = document.getElementById("test"); var culoare = " - culoarea textului: " + x.style.color; var bold = ".
Și acum textul este aldin."; x.innerHTML += culoare + bold; x.style.fontWeight = "bold"; )

Și ce spun ei, aceste voci.

Una și. Același: sunt vânzătorul, sunt vânzătorul. Ce vei face. Ce poți face. Da, ceapa Hydra în Rusia 2016. Și asta înseamnă că Bull Gates nu face contact. Nu merge.

Sau poate că vine. Dar tu nu înțelegi. Poate Minotaurul este acel șobolan mort de pe tavan. . Poate asa.

Și nu ți-au explicat nimic. Și asta înseamnă o procedură specială. Așa că am plecat în întuneric. Bietele capre... Ei bine, nu contează, o să ne dăm seama și să-i pedepsim pe vinovați. Va fi pentru ei

Până în 2003, specialiștii japonezi. A fost posibil să se dezvolte un set de mai multe microsonde care au conectat direct creierul și au făcut posibilă, într-o oarecare măsură, obiectivarea imaginii percepției umane. Echipamentul japonez nu a putut determina exact ce simțea și gândea persoana observată. Dar a făcut posibilă obținerea unei imagini color (deși neclare) a ceea ce el vape hidra.Și nu numai în realitate, ci și în faza rapidă a somnului. Acest lucru a devenit posibil deoarece semnalul a fost preluat nu de la nervul optic, ci din acele zone. Creierele care sunt responsabile pentru reprezentarea directă. Echipamentul a fost achiziționat imediat de echipa lui Potashinsky. Semnalul de la un set de sonde implantate în creier ar putea fi transmis fără fir. Conexiuni care i-au permis bablonautului să ducă o viață normală, deloc constrânsă de participarea la experiment. Era necesar doar ca un receptor de semnal să fie amplasat undeva în apropiere. Care apoi transmitea informații către computer în timp real. Pe scurt, schema experimentelor lui Potashinsky arăta astfel: Mai întâi, un set de electrozi de control a fost implantat în creierul bablonaut-ului-experimentator (voluntari, ca de obicei, au fost selectați dintre tinerii ofițeri FSB pentru acest rol).

Dintr-un punct mort. Ascultă, frate, spuse el, ce fel de natură este aceasta? Ce vrei sa spui? - a întrebat Isa. Ei bine, ai spus în mașină că corpul fragmentat de schije are aceeași natură ca și corpul curcubeu. Și ce fel de natură este aceasta? Ar fi bine să nu întrebi despre asta. Frate, se încruntă Isa. De ce. Încă nu ești pregătit pentru asta. Cum nu gata. Și amfetamina și marijuana în același timp.

Dacă aș fi gata, nu aș întreba. Deci poți răspunde. Sau.

Curând. a întrebat. Cumpărați hașiș în Vladivostok acum, am spus, aici... Cineva e pretențios. Un iubit ar putea fi jignit că nu are voie mai departe de holul rețelei. Dar Porfiry nu este așa. Primul lucru pe care l-am făcut a fost să mă conectez la ochelarii ei. Bine, spuse ea. Ce perciuni... Între timp, pun o poză cu ochelarii pe panou. Morphing-o cu vedere de la camera de tavan. Ifak ​​a ridicat orice transformare fără a-și încorda puterea. A fost monstruos. Acum Mara m-a văzut în ochelarii ei de ogment în locul aifak-ului și în același timp a putut observa. Un cifr dezvoltat. Uneori observa că era din nou chinuit de vise recurente conform schemei 1. Sau conform schemei 2. Și deodată, în text deschis, ca un strigăt scăpat: Visat ucis de mine în copilărie... O voce în spatele paravanului. A tăcut. Ce face ea? - a întrebat Sam. „Am adormit”, a răspuns Natasha. Sam îi mângâie ușor vârful înțepător al abdomenului și se lăsă pe spate pe canapea. Natasha înghiți în sec. Sam trase cutia de pe podea spre el, o deschise și scoase o cutie mică de sticlă. Borcanul, a scuipat roșu în el, l-a înșurubat și l-a aruncat înapoi - toată această operațiune ia luat amestecuri de fumat non-stop în secunde. — Știi, Natasha, spuse el.

După aceea el sfânt hașiș Hei, Tatarsky. Nici un răspuns. Tatarsky a mai așteptat un minut și și-a dat seama că a rămas singur. Singur, cu mintea gata să se dezlănțuie. Aveam nevoie urgent să mă ocup de ceva. Sună, șopti el. - La care. Gireev. El știe ce să facă. Pentru o lungă perioadă de timp. Nimeni nu a răspuns la telefon. În cele din urmă, pe al cincisprezecelea sau al douăzecilea ring, Gireev a răspuns sumbru: Bună. Andryusha.

Nu, spuse el. Există un bărbat care stă într-o cameră încuiată care nu știe chineză. Îi dau notițe cu întrebări în chineză prin fereastră. Pentru el, acestea sunt doar bucăți de hârtie pe care sunt desenate mâzgălețe, al căror sens nu le înțelege. Dar camera lui este plină de cărți diferite. Reguli care descriu în detaliu cum și în ce secvență să răspunzi doar cu squiggles. Și el, acționând conform acestor reguli, dă răspunsuri în chineză într-o altă fereastră. Ei creează încredere deplină în toți cei care stau afară că știu chineză. Deși el însuși nu înțelege deloc despre ce îl întreabă. Adresați-vă hydra onion browser care este sensul răspunsurilor sale. Introdus. Ei bine, l-am prezentat. Sura este aceeași cameră chinezească, doar automatizată. În loc de o persoană cu cărți de referință, există un scanner care citește hieroglife. O bază de date uriașă de referințe și reguli care vă permit să selectați hieroglife pentru răspuns.

În mod ironic, asta mi-a adus claritate. Cel puțin în termeni practici. Mi-am dat seama de problema cu care mă confruntam. Nu este doar complex, este evaziv. A fost dificil chiar și să formulezi corect întrebările legate de acesta. Singura consolare părea să fie Cum să găsești situl Hydra în limba Torus, situația era la fel de alunecoasă. Cu conștiința umană. Nu am putut să mă descurc cu asta. Și am decis că cea mai bună cale de ieșire din situație ar fi să mă întorc. La afaceri ca de obicei, lăsând exercițiile existențiale pentru mai târziu sau uitând de ele.

Curând drumul ducea la un sat bogat cu o biserică alb proaspăt pictată. Un soldat trist, cu un singur picior, într-o uniformă gri decolorată, stătea lângă gardul bisericii. Nu știi unde este Optina Pustyn. întrebă T. aplecându-se spre el de pe cal. Despre asta vorbesc băieții. întrebă soldatul. Care a fost recent înființat ca un stabiliment. Am hotărât că militarul a ieșit din minți. Cum a fost amenajat recent acest loc. Ceea ce înseamnă, în orice caz, totul este drept, cinste dumneavoastră, spuse soldatul și Ruleta Hydra mână, vei fi încă departe. Sunt doar două drumuri aici și ambele merg într-o singură direcție. Luați primul traseu sau al doilea. Dacă vrei un traseu mai scurt, atunci prin pădure. Există o furcă acolo, așa că puteți lua orice parte.

Și alte grimase, despre care cred că ați auzit multe... Lena nu a înțeles ce fel de tată-mamă proastă de optsprezece ani (tanarul a mormăit aceste cuvinte repede și în liniște), dar imediat a uitat de asta - ea a vrut deodată să ia o înghițitură de vin în valoare de douăzeci de mii de euro, încât i se lăsa gura apă. Un oftat liniștit a trecut prin hol, confirmând că cei adunați nu auziseră doar de grimase. Și am reușit să studiem în detaliu toate informațiile disponibile despre ei. „Recent, agențiile de informații occidentale au lansat o adevărată vânătoare pentru idioții noștri bogați”, a continuat tânărul. - Ai auzit, desigur, despre marile scandaluri adresa de hydra ceapa tk okey site hydra in torus arestări: mai întâi Courchevel, apoi Fiji, apoi boutique-ul Hermes, iar acum Saint Moritz, Maldive și Antarctica. Campania este atent planificată și are două obiective principale - în primul rând, discreditarea. Civilizația rusă - pentru a stabili controlul asupra resurselor sale prin colectarea de dovezi compromițătoare asupra proprietarilor principalelor sale active. Elita noastră a devenit o țintă, iar realitatea obiectivă a punctului actual din spațiu-timp este astfel încât. Am devenit ținte cu ea. Încruntat, a tăcut, parcă le-ar fi dat ascultătorilor săi ocazia să-și dea seama de gravitatea situației. Apoi zâmbetul trist i-a revenit pe față și a continuat: Trebuie să ținem situația sub control.

Ea zâmbi. Cel puțin nu trebuie să pretindeți că sunteți ofensat de nevinovăție în fața propriilor oameni. Despre ce. Când l-am provocat. Când a sărit goală din Intrarea ceapă Hydrași stătea în fața lui cațeluș. Consideri asta o provocare. Cu siguranţă. De ce, mă întreb, i-ai întors spatele? am ridicat din umeri. Pentru fiabilitate. Ce este mai ales de încredere în asta? Coada este mai aproape de țintă, am spus, nu prea încrezător. Bine. Și trebuie să te uiți peste umăr.

Treilea extaz de vanilie montan după cum urmează: Excelenței Sale O. Konstantin Petrovici Pobedonostsev, oficial. Prin prezenta, transmit Excelenței Voastre o traducere a unei inscripții egiptene antice. O foaie de foiță de aur găsită într-un medalion extaz de vanilie montan cadavrul părintelui Varsonofiy Netrebko în cadrul anchetei în cazul contelui T. Potrivit specialiștilor de la Muzeul Egiptean, conturul hieroglifelor ne permite datarea textului în epoca dinastiei a XVIII-a sau un timp ceva mai târziu. Pe inscripție scrie: Numele secret al hermafroditului cu cap de pisică, care dă putere asupra lui, este esența. ANGC. Dacă poți controla un hermafrodit cu acest nume. Amenda. Traducătorii care ANGC pot fi traduși și ca BHGV tradițional (sau altfel, în funcție de alegerea tabelelor de corespondență atunci când se utilizează registrele hieroglifice). Totuși, medalionul în sine nu poate fi transferat Excelenței Voastre, în ciuda cererii dumneavoastră.

Post navigare

Buna ziua! În acest tutorial aș dori să vorbesc despre cum puteți schimba stilul unui element pe o pagină web folosind JavaScript. Trebuie spus că în JavaScript, 2 abordări sunt de obicei folosite pentru a lucra cu stiluri:

• Schimbarea proprietății stilului
• Modificarea valorii clasei unui element

proprietate de stil

Proprietatea style reprezintă așa-numitele stiluri inline care vor fi afișate pe element prin atributul style. De exemplu, să setăm culoarea fontului:

Var root1 = document.documentElement; // setează stilul root1.style.color = "roșu"; // obține valoarea stilului document.write(root1.style.color); // roșu

În acest exemplu, numele proprietății culoare este același cu aceeași proprietate css. Prin analogie, puteți seta culoarea folosind css:

Html (culoare: roșu; )

Cu toate acestea, pentru acele proprietăți css care au o cratimă în nume, de exemplu, font-size. În JavaScript, pentru aceste proprietăți, cratima este eliminată, iar prima literă după cratimă este scrisă cu majuscule, adică cu majuscule

Var root1 = document.documentElement; root1.style.fontFamily = "Arial";

proprietatea className. Lucrul cu clase în JavaScript.

Folosind o proprietate precum className, puteți seta atributul class pe orice element html. Iată un exemplu:

.redStyle( color:red; font-family:Arial; ) .article( font-size:22px; ) Titlul articolului

Primul paragraf

Un alt paragraf

var article = document.querySelector("div.art"); // setarea unei noi clase article.className = "redStyle"; // obțineți numele clasei document.write(article.className);

Acest lucru elimină necesitatea de a configura fiecare proprietate individuală folosind proprietatea stil.
Cu toate acestea, trebuie luat în considerare faptul că valoarea anterioară a atributului de clasă va fi ștearsă. Prin urmare, dacă trebuie să adăugați o clasă, atunci aceasta ar trebui să fie combinată cu vechea clasă:

Article.className = article.className + „blueStyle”;

Dar dacă trebuie să eliminați complet toate clasele, puteți atribui proprietatea className unui șir gol:

ArticleDiv.className = "";

Proprietatea classList. Adăugarea unei noi clase la un element.

Mai sus ne-am uitat la cum să adăugați clase la un element dintr-o pagină web, dar pentru a gestiona un număr mare de clase este mai convenabil să folosiți o altă proprietate, classList. Această proprietate este un obiect care implementează următoarele metode:

• add(className): va adăuga o clasă className
• remove(className): va elimina clasa className
• toggle(className): va comuta clasa elementului la className. Adică, dacă nu există o clasă, aceasta va fi adăugată, iar dacă există, va fi eliminată.

Var article = document.querySelector("div.art"); // eliminați clasa article.classList.remove("art"); // adaugă o clasă

article.classList.add("redStyle"); // schimbă clasa
article.classList.toggle("art");

Rezultate.

Pentru a seta o clasă, utilizați metoda className.

Pentru a seta stilul unui element prin atributul style, se folosește metoda style.

Pentru a adăuga și elimina o clasă la un element, utilizați metodele classList.add(className) și classList.remove(className).