Questo post definisce l'obiettivo, il funzionamento e l'utilizzo del metodo 'getComputedStyle ()' dell'oggetto finestra in JavaScript.
Cosa fa il metodo 'getComputedStyle ()' dell'oggetto finestra in JavaScript?
IL ' getComputedStyle() ” restituisce l'oggetto “CSSStyleDeclaration” che contiene una raccolta delle proprietà CSS e dei relativi valori. Calcola le proprietà di stile dell'elemento HTML di destinazione. Inoltre, svolge anche un ruolo significativo nel calcolo delle proprietà stilistiche della parte specifica dell'elemento HTML.
Sintassi
finestra. getComputedStyle ( elemento , pseudoElemento )
Nella sintassi precedente:
- finestra: È l'oggetto globale che rappresenta la finestra del browser.
- elemento: Specifica il particolare elemento HTML il cui stile deve essere calcolato.
- pseudoElemento: Si riferisce alla parte dell'elemento HTML dato, ad esempio prima lettera, ultima lettera, ecc.
La sezione seguente esegue l'illustrazione pratica del metodo “getComputedStyle()” con l'ausilio di esempi.
Codice HTML (compreso lo stile CSS)
Innanzitutto, avere una panoramica del seguente codice HTML:
< Testa >
< stile >
h3{
dimensione carattere: 20px;
colore di sfondo:verdegiallo
}
< / stile >
< / Testa >
< corpo >
< h2 > Utilizzare il metodo getComputedStyle() dell'oggetto finestra < / h2 >
< h3 id = 'demo' > La dimensione del carattere dell'elemento HTML specificato è: < / h3 >
< P id = 'campione' >< / P >
Nelle righe di codice precedenti:
- IL '
Il tag ' applica lo stile dichiarato del ' 'Elemento HTML. - Nel '
', un sottotitolo è incluso nella sezione ' ' - Successivamente, l'elemento '
' con un id ' dimostrazione ” specifica un secondo sottotitolo.
- Infine il “ ' tag si riferisce a un paragrafo vuoto con un id ' campione ” per visualizzare le proprietà CSS calcolate dell'elemento mirato.
Nota: Questo codice HTML è seguito in tutti gli esempi dichiarati di questo post.
Esempio 1: applicazione del metodo 'getComputedStyle()' per calcolare la dimensione del carattere dell'elemento HTML
Questo esempio applica il metodo 'getComputedStyle()' per ottenere la dimensione del carattere dell'elemento HTML di destinazione.
codice javascript
Considera il codice JavaScript dichiarato:
< copione >cost elemento = documento. getElementById ( 'demo' ) ;
cost ogg = finestra. getComputedStyle ( elemento )
lascia la taglia = ogg. getPropertyValue ( 'dimensione del font' ) ;
documento. getElementById ( 'campione' ) . innerHTML = misurare ;
copione >
Nello snippet di codice sopra:
- Dichiara una variabile ' elemento ” con una parola chiave “const” che utilizza il “ getElementById() ” metodo per accedere all'elemento “
” tramite il suo id “ dimostrazione ”.
- Successivamente, applica il ' getComputedStyle() ” per calcolare le proprietà CSS dell'elemento “
” recuperato.
- Successivamente, il “ misurare ” variabile applica il “ getPropertyValue() ” metodo che restituisce il valore della proprietà CSS applicata “ dimensione del font ” come una stringa.
- Infine, il metodo 'getElementById()' accede al paragrafo vuoto e visualizza il valore della proprietà CSS calcolato utilizzando il ' innerHTML ' proprietà.
Produzione
Come visto, l'output visualizza il valore della dimensione del carattere applicato rispetto all'elemento HTML corrispondente, ad esempio '
'.
Esempio 2: applicazione del metodo 'getComputedStyle()' per calcolare il colore di sfondo dell'elemento HTML
In questo esempio, il metodo discusso viene utilizzato per calcolare il colore di sfondo dell'elemento HTML specifico:
< copione >cost elemento = documento. getElementById ( 'demo' ) ;
cost ogg = finestra. getComputedStyle ( elemento )
lascia bgcolor = ogg. getPropertyValue ( 'colore di sfondo' ) ;
documento. getElementById ( 'campione' ) . innerHTML = bgcolor ;
copione >
Nel blocco di codice sopra, il ' getComputedStyle() ” il metodo calcola il “ colore di sfondo ” dell'elemento “
” il cui id è “demo” e restituisce il suo valore come “rgb” tramite il “ getPropertyValue() ' metodo.
Produzione
L'output mostra chiaramente il colore di sfondo calcolato dell'elemento HTML recuperato.
Conclusione
JavaScript offre il ' getComputedStyle() ” metodo per calcolare le proprietà di stile CSS dell'elemento HTML di destinazione. Il valore calcolato di questo metodo è una stringa che contiene le proprietà CSS e i relativi valori. Può essere implementato in diversi modi utilizzando JavaScript per ottenere le proprietà CSS di qualsiasi elemento HTML. Questo post ha fornito una visione dettagliata dell'obiettivo, del funzionamento e dell'utilizzo del metodo 'getComputedStyle ()' dell'oggetto finestra in JavaScript.