April 11
Cascading Style Sheets (CSS) sono stati introdotti nelle specifiche HTML per facilitare codice più efficiente, leggibile, e mutevole per controllare l'aspetto delle pagine web. La potenza combinata di CSS, il Document Object Model (DOM), e JavaScript rende il compito di analisi attraverso una pagina Web enorme con molti elementi monumentali più facile e meno soggetto a errori. È possibile controllare gli attributi CSS ( "proprietà di stile") di un elemento in una pagina Web utilizzando un metodo JavaScript per fare riferimento all'elemento nel DOM e invocando il metodo "getComputedStyle". È inoltre possibile utilizzare l'oggetto "Fogli di stile" per analizzare il foglio di stile di una pagina Web (s) e verificare le proprietà di stile impostate lì.
1 Utilizzare il metodo "getElementById" dell'oggetto "documento" per accedere rapidamente un elemento specifico nella struttura DOM della pagina. Un particolare ID può essere assegnato solo a un singolo elemento. Assegnare l'ID nel tag HTML dell'elemento con l'attributo "id":
<P id = "specialP"> paragrafo di testo </ p>
Ecco il modo per fare riferimento a questo elemento con ID in Javascript:
document.getElementById ( "specialP")
Il metodo restituisce un riferimento all'elemento paragrafo specificato. Più tardi, useremo questo riferimento per controllare le proprietà CSS dell'elemento.
2 Utilizzare il metodo "getElementsByTagName" dell'oggetto "documento" per recuperare un array di tutti gli elementi nella struttura DOM con un particolare nome di tag (vedi Bibliografia 1). Ecco un esempio:
document.getElementsByTagName ( "p")
Gli array in JavaScript sono numerati da 0. Per specificare il primo paragrafo del documento, usare le parentesi quadre come questo:
document.getElementsByTagName ( "p") [0]
3 Utilizzare il "parentNode," "childNodes," "firstChild," "lastChild," "nextSibling," e metodi "previousSibling" per attraversare l'albero DOM relativamente alla posizione corrente in esso. Etichette nidificate all'interno di altri tag sono i bambini, e le etichette di nidificazione sono i genitori. Tenere questo rapporto familiare metafora in mente. Ecco un esempio che fa riferimento al tag all'interno del corpo (o altro elemento di nidificazione), che si trova immediatamente dopo il paragrafo con ID "specialP:"
document.getElementById ( "specialP"). nextSibling
Il metodo "childNodes", come "getElementsByTagName," restituisce un array, in modo da utilizzare la stessa sintassi per specificare quale elemento figlio si desidera esaminare:
document.getElementsByTagName ( "ul") [0] .childNodes [2]
Questo fa riferimento al terzo punto nella prima lista non ordinata sulla pagina.
4 Utilizzare il metodo "window.getComputedStyle" per controllare le proprietà di stile di un elemento HTML che hai fatto riferimento nel albero DOM:
var ref = document.getElementById ( "specialP");
var = checkedStyle window.getComputedStyle (ref) .fontSize;
La proprietà "fontSize" è una delle tante proprietà di stile che possono essere assegnati a un elemento HTML. Consultate la pagina "HTML DOM stile di oggetto" a w3schools.com per un elenco organizzato di proprietà che è possibile controllare. Si noti che in JavaScript, proprietà di stile sono scritti in caso di cammello ( "fontSize"), in contrasto con la forma con trattino utilizzato in codice CSS ( "font-size").
5 Leggere il contenuto dei fogli di stile del documento se stessi per vedere quali proprietà sono stati assegnati. Il codice che segue fa riferimento al primo insieme di proprietà definite nel primo foglio di stile del documento:
document.styleSheets [0] .cssRules [0] .style.cssText
6 Effettua una ricerca tra i fogli di stile del documento utilizzando per i cicli di trovare le proprietà di stile definite per un tag specifico o di altro selettore CSS. Il codice seguente trova tutte le proprietà di stile definite utilizzando il selettore CSS "p", e le relazioni ciascuno in una finestra di dialogo.
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 ( "Numero StyleSheet:" + j + "\ n" + "Regola numero:" + i + "\ n" + "Proprietà:" + document.styleSheets [J] .cssRules [i] .style.cssText);
}
}
}
Questo è uno strumento di debug utile per una pagina che usa molti fogli di stile differenti.