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.