Adnotare: acces la foile de stil. Proprietățile foii de stil. Adăugarea și eliminarea regulilor. Schimbarea stilurilor de elemente. Numele claselor de elemente.
Să luăm un exemplu (deocamdată) teoretic – să presupunem că avem un site web care prezintă o serie de articole tehnice. Vrem să atragem atenția asupra unora dintre aceste articole cu un carusel animat distractiv, dar cum rămâne cu utilizatorii care nu au JavaScript activat dintr-un anumit motiv? Ne amintim de ceea ce am învățat despre JavaScript discret, dorim ca funcțiile site-ului Web să funcționeze și pentru acești utilizatori, dar este posibil să dorim să stilăm site-ul diferit pentru acești utilizatori, astfel încât aceștia să poată utiliza site-ul confortabil, chiar și fără carusel.
Dacă doriți să ștergeți această regulă, puteți apela funcția stylesheet.deleteRule(index), unde index va fi indexul regulii de șters.
În exemplul demonstrativ al articolului, puteți crea o regulă care setează proprietatea de afișare la niciunul pentru toate articolele HTML și JavaScript - consultați exemplul carusel (http://dev.opera.com/articles/view/dynamic-style-css- javascript/carusel .html) pentru a-l vedea în acțiune.
Notă: IE nu implementează regulile conform standardelor. În loc de atributul cssRules, folosește reguli . IE folosește, de asemenea, removeRule în loc de deleteRule și addRule( selector , rule, index) în loc de insertRule .
Schimbarea stilurilor de elementeAcum ar trebui să înțelegeți cum să editați foile de stil legate de pagină și să creați și să modificați regulile CSS în ele. Ce se întâmplă dacă doriți să schimbați un anumit element din DOM? Folosind API-ul DOM, puteți accesa anumite elemente ale paginii. Revenind la exemplul carusel, puteți observa că funcțiile sunt definite în așa fel încât atunci când dați clic pe un articol, acel articol este evidențiat, în timp ce corpul articolului este afișat mai jos.
Prin DOM, accesăm obiectul de stil, care descrie stilul documentului. Acest obiect de stil este definit ca CSSStyleDeclaration ; o explicație detaliată a acestui lucru poate fi găsită în documentația W3C de pe interfața CSSStyleDeclaration (http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration). Obiectul de stil funcționează diferit față de unele dintre celelalte proprietăți definite pe elementul HTML. Spre deosebire de element.href sau element.id , care returnează șiruri, element.style returnează un . Aceasta înseamnă că nu este posibil să setați stilul prin alocarea unui șir la element.style .
Obiectul de stil are atribute care corespund diferitelor proprietăți CSS setate. De exemplu, style.color returnează setul de culori pe element. Făcând element.style.color = „roșu”; poți schimba dinamic stilul. Mai jos este o funcție care transformă culoarea unui element în roșu atunci când i se oferă id-ul elementului.
funcția colorElementRed(id) ( var el = document.getElementById(id); el.style.color = "roșu"; )
De asemenea, puteți utiliza setAttribute(key, value) pentru a stila un element. De exemplu, setați culoarea unui element la roșu apelând element.setAttribute("style", "color: red"); pe element. , dar aveți grijă, deoarece aceasta va elimina orice modificări aduse obiectului de stil.
Când stilul unui element este setat în acest fel, este la fel ca și cum l-am seta ca declarație a atributului de stil al elementului html. Acest stil va fi aplicat numai atunci când importanța și specificitatea regulii sunt mai mari decât alte reguli aplicate elementului (specificitatea este explicată în Capitolul 28 despre moștenirea și cascada CSS).
Unii dintre voi s-ar putea să vă întrebați ce se întâmplă atunci când o anumită proprietate CSS are o liniuță. În acest caz
Ultima actualizare: 1.11.2015
Există două abordări principale pentru a lucra cu proprietățile stilului elementului în JavaScript:
Schimbarea proprietății stilului
Modificarea valorii atributului de clasă
Proprietatea style reprezintă un obiect complex pentru managementul 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, setați culoarea fontului:
var root = document.documentElement; // setați 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 cu css:
HTML (culoare: albastru; )
Cu toate acestea, o serie de proprietăți CSS au o cratimă în numele lor, cum ar fi font-family . JavaScript nu folosește cratime pentru aceste proprietăți. Doar prima literă după cratima este convertită în majuscule:
var root = document.documentElement; root.style.fontFamily = "Verdana";
proprietate classnameProprietatea className poate fi folosită pentru a seta atributul de clasă 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 numele clasei document.write(articleDiv.className);Folosind clase, nu trebuie să setați fiecare proprietate css cu proprietatea style.
Cu toate acestea, trebuie luat în considerare faptul că valoarea anterioară a atributului de clasă este eliminată. 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, atunci puteți atribui un șir gol proprietății:
ArticleDiv.className = "";
proprietate classListAm văzut cum să adăugați clase la un element de mai sus, dar este mult mai convenabil să gestionați mai multe clase folosind proprietatea classList. Această proprietate reprezintă un obiect care implementează următoarele metode:
add(className) : adaugă clasa className
remove(className) : elimină clasa className
toggle(className): Comută clasa unui element la className. Dacă clasa nu există, atunci este adăugată, dacă există, atunci este eliminată.
De exemplu:
Var articleDiv = document.querySelector("div.article"); // elimina clasa articleDiv.classList.remove("articol"); // adauga clasa articleDiv.classList.add("blueStyle"); // comuta 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 exemple de utilizare a acestora pentru a controla clasele și, respectiv, stilurile elementelor de pe pagină.
Gestionarea clasei (claselor) unui elementPrima 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 className DOM nu a fost numită clasă din cauza faptului că anterior în JavaScript, cuvintele rezervate nu puteau fi folosite ca nume pentru proprietățile obiectului. 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 efectuăm diverse operații asupra clasei element folosind proprietatea className DOM:
varelem = document.querySelector("#alerta"); // adaugă o clasă la elementul elem.className = "alertă"; // "alerta" // schimba clasa elementului elem.className = "avertisment-alerta"; // "alert-warning" // obține valoarea clasei și o stochează în className var classElem = elem.className; // "alerta-avertisment" // elimină clasa din elementul elem.className = ""; // ""
A doua modalitate de a efectua operații asupra clasei unui element este utilizarea metodelor de manipulare a atributelor.
Un exemplu în care efectuăm acțiuni precum codul de mai sus, dar folosind metode de gestionare a atributelor:
varelem = 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 o stocați în className var classElem = elem.getAttribute("class"); // "alerta-avertisment" // elimina clasa din elementul elem.removeAttribute("clasa");
Proprietatea className DOM și atributul class sunt întotdeauna sincronizate între ele, ceea ce înseamnă că atunci când una se schimbă, se schimbă și cealaltă.
Dar un element poate avea nu o singură clasă, ci mai multe. În acest caz, lucrul cu ele ca șir nu este foarte convenabil.
De exemplu, determinarea prezenței unei anumite clase într-un element folosind metodele de mai sus nu se mai poate face așa simplu. Acest lucru va necesita scris un cod.
Un exemplu în care verificăm dacă elementul are clasa content__show:
... varelem = 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 face aceste acțiuni și altele foarte ușoare, elementul are o proprietate DOM classList specială pentru aceste cazuri.
proprietate classListProprietatea classList este un obiect special (DOMTokenList) care conține metode pentru efectuarea diferitelor operații asupra claselor elementului.
metode liste de clase:
- .add(className1[,className2,...]) - Adaugă una sau mai multe clase specificate la un element. Dacă elementul are deja această clasă, atunci nu va fi adăugat la ea.
- .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ă elementul are o clasă; returnează adevărat sau fals ca răspuns.
- .toggle(className [,flag]) - comută numele clasei specificate pe element, i.e. dacă elementul are clasa dată, o elimină; adaugă altfel. Al doilea parametru (steagul) este opțional. Setarea implicită este nedefinită. Dacă este setată la true sau false , atunci va funcționa ca o metodă de adăugare sau eliminare, de ex. fie adăugați o clasă unui element, fie eliminați-l din acesta.
Un exemplu care arată cum puteți efectua diverse acțiuni legate de clasele de elemente folosind metode classList:
// obține elementul c id = "sidebar" var sideBar = document.querySelector("#sidebar"); // comută clasa hidden-xs a elementului, adică dacă elementul îl are, atunci ștergeți-l; iar dacă această clasă nu există, atunci adăugați-o la ea sideBar.classList.toogle("hidden-xs"); // adaugă trei clase suplimentare elementului sideBar. classList. add("col-xs-6","col-sm-4","col-md-3"); // elimină clasa hidden-xs din elementul sideBar. 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 1. Folosind bucla for // classList.length - numărul de clase dintr-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 pe care o putem folosi pentru a-și 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 stil 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 de culoare de fundal pentru obiectul de stil ar fi setată la backgroundColor . Și, de exemplu, o proprietate CSS cu prefixul browserului -webkit-border-radius - ca WebkitBorderRadius .
Eliminarea stilurilorDe exemplu, să setăm corpul la o culoare de fundal:
Document.body.style.backgroundColor = "#eee";
Dacă acum acest stil trebuie să fie eliminat, 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 DOM stil pentru a seta stiluri pentru elemente.
// setați elementul cu id = "introtext" folosind stil la culoarea textului roșu document.querySelector("#introtext").style.color = "red"; // setați toate p elementele din pagină folosind stilul la culoarea textului 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 csstextPe lângă setarea individuală a stilurilor pentru un element, le putem seta pe toate simultan 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ă. Acestea. 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 stiluri „font-size:40px; color:blue;” elemente cu introducerea clasei:
//obține elemente cu clasa intro var intro = document.querySelectorAll("intro"); //setează „dimensiunea fontului: 40px; culoare: albastru;” la toate elementele din colecția 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 cu proprietatea style.cssText. Acest lucru se datorează faptului că, atunci când este setată, această proprietate elimină toate stilurile pe care le are elementul. Acestea. cele pe care le-am stabilit cu atributul style și în proprietatea DOM corespunzătoare.
De asemenea, puteți efectua o operație similară cu cea efectuată de proprietatea style.cssText prin metoda setAttribute.
De exemplu:
//obține primul element cu introducerea clasei var info = document.querySelector("info"); //setează-i stilul la „marjă: 10px; umplutură: 10px; chenar: 1px verde continuu;” info.setAttribute("stil", "marja: 10px; umplutură: 10px; chenar: 1px verde continuu;");
Sarcini1. Scrieți un script folosind classList pentru a atribui trei clase unui element cu text de clasă: 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 din pagină cu o clasă care începe cu cuvintele bloc- .
Salutare tuturor! În acest articol, ne vom uita la cum să facem stilul corect și între browsere în javascript.
Deci, aceia dintre voi care sunt deja cel puțin puțin familiarizați cu javascript știți că elementele au o proprietate de stil, care stochează un obiect, folosindu-se să setați anumite stiluri css. Cu toate acestea, nu totul este atât de simplu pe cât ar părea la prima vedere. Si de aceea. Să creăm două dintre cele mai comune blocuri div, dar pentru unul vom seta stiluri prin atributul style, iar pentru celălalt prin eticheta style.
div (
lățime: 150px
înălțime: 150px;
}
#div1 (
fundal: #f00;
}
Acum să încercăm să afișăm valoarea proprietății de fundal pentru aceste blocuri.
Vardiv1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
alert(div1.style.background);
alert(div2.style.background);
În primul caz, nu vom obține nimic, dar pentru blocul div2, stilurile vor fi afișate. De ce? Chestia este că javascript poate afișa numai valorile proprietăților care au fost setate direct în marcajul html folosind atributul style și cele care au fost setate prin javascript. Dacă acum setăm proprietatea de fundal astfel
Div1.style.background = "#f00";
Acum valoarea va fi afișată prin alertă.
Alertă(div1.style.background);
Aceleași stiluri pe care le setăm în eticheta de stil sau într-o foaie de stil externă se numesc „stiluri calculate” sau „stiluri calculate”. Și-au primit numele pentru un motiv. Faptul este că browserul citește mai întâi marcajul html, apoi calculează stilurile pe care le setăm în foaia de stil externă și le aplică acestui marcaj.
Cu toate acestea, le putem accesa în continuare. Specificația DOM Level2 are o funcție specială getComputedStyle() pentru aceasta. Să vedem cum funcționează.
varstyles = getComputedStyle(div1);
alert(stiluri.fond);
Trebuie să îi transmiteți elementul ale cărui stiluri doriți să obțineți și vă va returna un obiect. Acum doar specificați proprietatea de care aveți nevoie și veți obține imediat valoarea acesteia.
Cu toate acestea, această caracteristică nu funcționează cu browsere mai vechi (IE8- ), așa că dacă doriți ca codul dvs. să fie cross-browser, atunci utilizați codul de mai jos.
Funcția getStyle(element) (
return window.getComputedStyle ? getComputedStyle(element): element.currentStyle;
}
Folosiți similar
varstyles = getStyle(div1); alert(stiluri.fond);
Așadar, astăzi am învățat cum să lucrăm cu stiluri în javascript și cum să obținem stiluri între browsere.
Buna ziua! În acest tutorial, aș dori să vorbesc despre cum puteți schimba stilul unui element pe o pagină web folosind JavaScript. Trebuie să spun că în JavaScript, de regulă, sunt folosite 2 abordări pentru a lucra cu stiluri:
- Schimbarea proprietății stilului
- Modificați valoarea clasei unui element
Proprietatea style este 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 proprietatea css corespunzătoare. 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ă cratime este scrisă cu majuscule, adică cu majuscule
var root1 = document.documentElement; root1.style.fontFamily = "Arial";
proprietatea className. Lucrul cu clase în JavaScriptCu 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 numele clasei document.write(article.className);Acest lucru elimină necesitatea de a configura fiecare proprietate individuală folosind proprietatea stil.
Cu toate acestea, rețineți că valoarea anterioară a atributului de clasă va fi eliminată. Prin urmare, dacă trebuie să adăugăm 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, atunci puteți atribui un șir gol proprietății className:
ArticleDiv.className = "";
proprietate 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 clasa className
- remove(className): va elimina clasa className
- toggle(className): comută clasa elementului la className. Adică, dacă nu există o clasă, atunci aceasta va fi adăugată, iar dacă există, atunci va fi ștearsă.
var article = document.querySelector("div.art"); // elimina clasa article.classList.remove("art"); // adaugă clasa
article.classList.add("redStyle"); // schimbă clasa
article.classList.toggle("art");
Pentru a seta clasa, se folosește metoda - className.
Pentru a seta un stil pentru un element prin atributul style, utilizați metoda style.
Metodele ClassList.add(className) și classList.remove(className) sunt folosite pentru a adăuga și elimina o clasă la un element.
