Questa guida approfondisce l'obiettivo e il funzionamento della proprietà 'stile' dell'elemento HTML DOM in JavaScript.
Come funziona la proprietà 'style' dell'elemento HTML DOM in JavaScript?
Il DOM HTML “ stile ' è una proprietà di sola lettura che funziona in base alle proprietà di stile allocate di conseguenza. Inoltre, restituisce il ' CSSStyleDeclaration ” che contiene tutti gli attributi di stile inline del particolare elemento HTML.
Nota: L'oggetto 'CSSStyleDeclaration' contiene gli attributi di stile CSS definiti nella sezione head.
Sintassi (Imposta una proprietà di stile)
elemento. stile . proprietà = valoreSecondo la sintassi di cui sopra, il ' stile ” la proprietà supporta solo un parametro “ valore ” che rappresenta il valore della proprietà di stile specificata.
Sintassi (restituisce una proprietà di stile)
elemento. stile . proprietàImplementiamo praticamente le sintassi sopra discusse della proprietà “style”.
Esempio 1: utilizzare la proprietà 'style' per impostare il colore di un particolare elemento HTML
Questo esempio applica la sintassi di base del ' stile ” per impostare il valore della proprietà “style” in modo tale che il colore del particolare elemento HTML venga modificato.
Codice HTML
Innanzitutto, passa attraverso il codice HTML fornito:
< h2 > Usa la proprietà style in JavaScript h2 >
< h3 id = 'H3' > Secondo sottotitolo. h3 >
Nelle righe di codice sopra:
- IL ' Il tag HTML specifica il primo sottotitolo.
- IL ' Il tag ” crea il secondo sottotitolo del livello 3 con un ID assegnato “H3”.
codice javascript
Quindi, segui il codice JavaScript indicato:
< copione >documento. getElementById ( 'H3' ) . stile . colore = 'verde' ;
copione >
Nel frammento di codice sopra, il ' documento.getElementById() ” metodo accede all'incluso “ ” elemento tramite il suo id “ H3 ” per impostare il “ colore ” valore dell'attributo dell'elemento tramite il “ stile.colore ' proprietà.
Produzione
L'output mostra che la rappresentazione visiva dell'elemento HTML mirato è impostata di conseguenza utilizzando la proprietà 'style'.
Esempio 2: utilizzare la proprietà 'style' per ottenere il valore dell'attributo 'style' applicato
In questo esempio, la proprietà 'style' aiuta a scoprire l'attributo 'style' assegnato all'elemento HTML utilizzando la sua sintassi generalizzata (Return a style Property).
Codice HTML
Il codice HTML è indicato qui:
< h2 > Usa la proprietà style in JavaScript h2 >< h3 id = 'H3' stile = 'colore-sfondo:arancione;' > Il valore del colore di sfondo del secondo sottotitolo è : h3 >
< h4 id = 'demo' > h4 >
In questo codice:
- IL ' Il tag HTML utilizza l'attributo 'style' che imposta il colore di sfondo dell'elemento HTML '
'.
- IL ' ” tag crea un sottotitolo vuoto di livello 4 con un id “ dimostrazione ”.
codice javascript
Ora, guarda il codice JavaScript fornito:
< copione >cost valore = documento. getElementById ( 'H3' ) . stile . colore di sfondo ;
documento. getElementById ( 'demo' ) . innerHTML = valore ;
copione >
Nel codice sopra scritto:
- La variabile “ valore ” è dichiarato con un “ cost ” parola chiave che applica il “ documento.getElementById() ” per recuperare l'elemento '
' utilizzando il suo id per ottenere il valore dell'attributo 'style' applicato e applicarlo all'elemento, ad esempio '
' tramite la proprietà 'style'.
- Il metodo 'document.getElementById()' viene utilizzato nuovamente per accedere all'elemento vuoto aggiunto '
' e visualizzare il valore dell'attributo 'style' allocato rispetto all'elemento HTML recuperato e aggiungerlo come sottotitolo tramite ' innerHTML ' proprietà.
Produzione
L'output applica il colore di sfondo all'elemento e viene restituito di conseguenza anche il valore dell'attributo set 'style'.
Conclusione
JavaScript utilizza il ' stile ” per assegnare e restituire le proprietà “style” inline dell'elemento HTML DOM. Richiede un 'valore' aggiuntivo per applicare la funzionalità desiderata di conseguenza. Oltre all'impostazione e al recupero, è anche vantaggioso modificare l'attributo 'stile' esistente. Questa guida ha dimostrato l'obiettivo principale, il funzionamento e l'implementazione pratica della proprietà HTML DOM Element style.