- Accesul la foi de stil
- stylesheets Proprietăți
- Adăugarea și ștergerea regulilor
- Elemente de schimbare ale stilului
- Numele claselor de elemente
- concluzie
- întrebări de testare
Accesul la foi de stil
Puteți adăuga, de asemenea, o pagină nouă foaie de stil - puteți utiliza funcția document.createElement pentru a crea noi elemente de stil. Acest lucru va fi util atunci când doriți să le oferi vizitatorilor site-ului posibilitatea de a modifica dinamic stilul site-ului, probabil, cu ajutorul unor butoane de control. Aici este un mic exemplu de modul de a crea o nouă foaie de stil:
Ștergerea unei foi de stil este, de asemenea, foarte ușor de făcut. În primul rând, aveți nevoie pentru a obține foaia de stil. pe care doriți să-l ștergeți. Acest lucru poate fi realizat prin utilizarea document.getElementById. așa cum se arată în exemplul următor mic. Pentru a elimina o foaie de stil. Puteți utiliza funcția DOM parent.removeChild (elementul). în cazul în care elementul este supus foaia de stil. pe care doriți să îl eliminați, iar nodul părinte este un strămoș al stylesheet. După cum se arată în exemplul de mai jos, pentru a elimina foaia de stil (sheetToBeRemoved), veți obține mai întâi o foaie de stil părinte - var sheetParent = sheetToBeRemoved.parentNode - apel și apoi argumentul removeChild sheetToBeRemoved - sheetParent.removeChild (sheetToBeRemoved)
stylesheets Proprietăți
Cele mai multe proprietăți obiect Stylesheet sunt numai în citire, dar unele, cum ar fi persoanele cu handicap. Acesta poate fi schimbat.
Pentru fiecare foaie de stil obiect. extrase din stylesheets matrice. puteți accesa titlul de proprietate. pentru a verifica dacă acesta conține titlul pe care doriți să găsiți. Exemplul actual de acest lucru poate fi văzut în exemplul de adăugare și eliminarea normelor. care este discutat în secțiunea următoare.
Adăugarea și ștergerea regulilor
stylesheet obiect are două funcții care ajuta la rezolvarea problemei. Prima este o funcție insertRule. care este după cum urmează:
unde regula este un șir care conține regula. dorim să adăugați la foaia de stil. indicele determină în cazul în care în lista de reguli stylesheet trebuie să se potrivească această regulă. Iată cum ar putea arăta.
Dacă doriți să ștergeți această regulă. Puteți apela funcția stylesheet.deleteRule (index). în cazul în care indicele este regulile de index. vor fi șterse.
Notă. IE nu pune în aplicare normele în conformitate cu aceste standarde. In schimb, se folosește cssRules atribuie reguli. IE folosește, de asemenea, în loc removeRule deleteRule și addRule (selector. Regula, indicele) în loc insertRule.
Elemente de schimbare ale stilului
obiect Style are atribute care corespund diferitelor proprietăți CSS specificate. De exemplu, se întoarce style.color specificat pe culoarea elementului. Efectuarea element.style.color = "red"; puteți modifica dinamic stilul. Următoarele prezintă funcția. care transformă culoarea elementului în roșu, atunci când acesta este trecut element de identitate.
De asemenea, este posibil să se utilizeze setAttribute (cheie, valoare) pentru a seta elementul de stil. De exemplu, setul de elementul de culoare roșie, provocând la elementul element.setAttribute ( „stil“, „culoare: roșu“);. dar fii atent, deoarece acest lucru înlătură orice modificări aduse stilului de obiect.
Amintiți-vă obiecte stylesheets. styleSheet.cssRules proprietate returnează o listă de obiecte de stil. reprezentând toate regulile CSS. conținute în foaia de stil. Acestea stil de obiecte pot fi, de asemenea, folosite ca obiecte de stil pentru celelalte elemente. În acest caz, în loc să modificați un element din pagină, modificările de aici se vor schimba toate elementele la care normele CSS.
Numele claselor de elemente
concluzie
întrebări de testare
- Care este diferența dintre setAttribute și stilul prin atribuirea de obiect CSSStyleDeclaration?
- Specificați două modalități prin care puteți avea toate imaginile pentru a afișa un chenar verde atunci când utilizatorul face clic pe butonul.
- Se va schimba elementul obiect CSSStyleDeclaration întotdeauna schimba stilul unui element? De ce?
- Se specifică două moduri de a accesa o anumită foaie de stil.
