Hvordan sjekke CSS attributter med Javascript

Cascading Style Sheets (CSS) ble innført i HTML-spesifikasjonen til rette for mer effektiv, lesbar, og foranderlig kode for å styre utseendet på websider. Den kombinerte kraften i CSS, Document Object Model (DOM) og Javascript gjør oppgaven med parsing gjennom en stor webside med mange elementer monumentally enklere og mindre utsatt for feil. Du kan sjekke CSS attributter ( "stil egenskaper") av et element i en webside ved å bruke en Javascript-metode for å referere elementet i DOM og påkalle "getComputedStyle" metoden. Du kan også bruke "stilark" objekt å analysere ark en webside stil (r) og sjekk stilegenskapene satt der.

Bruksanvisning

Navigere DOM treet

1 Bruk "getElementById" metoden for "dokument" objekt for å få rask tilgang til et bestemt element i DOM-treet på siden din. En spesiell ID bare være tilordnet en enkelt element. Tildele ID i elementet HTML tag med "id" attributt:

<P id = "specialP"> tekstavsnitt </ p>

Her er en måte å referere dette elementet av ID i Javascript:

document.getElementById ( "specialP")

Metoden returnerer en referanse til avsnitt element spesifisert. Senere vil vi bruke denne referansen til å kontrollere CSS egenskaper av elementet.

2 Bruk "getElementsByTagName" metoden for "dokument" objekt for å hente en matrise av alle elementene i DOM-treet med et bestemt merke navn (se referanser 1). Her er et eksempel:

document.getElementsByTagName ( "p")

Arrays i Javascript er nummerert fra 0. For å spesifisere det første avsnittet i dokumentet, bruker hakeparenteser som dette:

document.getElementsByTagName ( "p") [0]

3 Bruk "parentNode," "childNodes", "firstChild", "lastChild", "nextSibling" og "previousSibling" metoder for å traversere DOM-treet i forhold til din nåværende posisjon i det. Tags nestet innenfor andre koder er barn, og de hekkende kodene er foreldre. Ta vare på dette familieforholdet metaforen i tankene. Her er et eksempel som viser til tag i kroppen (eller annen hekke element) som er umiddelbart etter avsnittet med ID "specialP:"

document.getElementById ( "specialP"). nextSibling

Den "childNodes" metoden, som "getElementsByTagName," returnerer en matrise, så bruk den samme syntaksen til å angi hvilke barn element du ønsker å undersøke:

document.getElementsByTagName ( "ul") [0] .childNodes [2]

Dette refererer til tredje elementet i første sorterte liste på siden.

Henter stil Properties

4 Bruk "window.getComputedStyle" metode for å sjekke stilegenskapene i et HTML-element du har referert til i DOM-treet:

Var ref = document.getElementById ( "specialP");

Var checkedStyle = window.getComputedStyle (ref) .fontSize;

Den "skrift" eiendom er en av mange stilegenskaper som kan bli tildelt et HTML-element. Se i "HTML DOM stil objekt" side på w3schools.com for en organisert liste over egenskaper du kan sjekke. Merk at i Javascript, er stilegenskaper skrevet i kamel sak ( "skrift"), i motsetning til bindestrek form som brukes i CSS-kode ( "font-size").

5 Les innholdet i dokumentet stilark seg for å se hvilke egenskaper har blitt tildelt. Følgende kode viser til første sett med egenskaper som er definert i første stilark av dokumentet:

document.styleSheets [0] .cssRules [0] .style.cssText

6 gjennom dokumentet stilark søke hjelp for looper å finne de definerte stilegenskaper for en bestemt kode eller annen CSS selector. Følgende kode finner alle stilegenskapene som er definert ved hjelp av CSS selector "p", og rapporterer hver i en dialogboks.

for (var j = 0; j <document.styleSheets.length; j ++) {

for (var i = 0; i <document.styleSheets [j] .cssRules.length; i ++) {

if(document.styleSheets[j].cssRules[i].selectorText=="p"){

alert ( "stylesheet nummer:" + j + "\ n" + "Regel nummer:" + i + "\ n" + "Egenskaper:" + document.styleSheets [J] .cssRules [i] .style.cssText);

}

}

}

Dette er et nyttig debugging verktøy for en side som bruker mange forskjellige stilark.

Hint

  • Plasser følgende kode på toppen av HTML-dokument (før den første "html" tag) for å sikre riktig atferd "getComputedStyle" og stilark objekter i Internet Explorer 9: <! DOCTYPE HTML PUBLIC "- // W3C / / DTD HTML 4.01 // EN "" http://www.w3.org/TR/html4/strict.dtd ">
  • Når du navigerer i DOM-treet med "parentNode," "childNodes", "firstChild", "lastChild", "nextSibling" og "previousSibling" metoder, være oppmerksom på at nettlesere tolker hvit plass i HTML-koden som DOM noder. Utvikler David Baron dekker dette emnet godt i en artikkel kalt "Mellomrom i DOM" på mozilla.org.