Deze gids gaat dieper in op het doel en de werking van de HTML DOM Element 'style' eigenschap in JavaScript.
Hoe werkt de eigenschap HTML DOM-element 'stijl' in JavaScript?
De HTML-DOM “ stijl ” is een alleen-lezen eigenschap die dienovereenkomstig werkt op basis van de toegewezen stylingeigenschappen. Ook retourneert het de ' CSSStyleDeclaration ”-object dat alle inline stijlkenmerken van het specifieke HTML-element bevat.
Opmerking: Het object 'CSSStyleDeclaration' bevat de CSS-stijlkenmerken die zijn gedefinieerd in het hoofdgedeelte.
Syntaxis (stel een stijleigenschap in)
element. stijl . eigendom = waardeVolgens de bovenstaande syntaxis is de ' stijl ” eigenschap ondersteunt slechts één parameter “ waarde ” dat de waarde vertegenwoordigt van de opgegeven stylingeigenschap.
Syntaxis (een stijleigenschap retourneren)
element. stijl . eigendomLaten we de hierboven besproken syntaxis van de eigenschap 'stijl' praktisch implementeren.
Voorbeeld 1: gebruik de eigenschap 'style' om de kleur van een bepaald HTML-element in te stellen
In dit voorbeeld wordt de basissyntaxis van de ' stijl ” eigenschap om de waarde van de eigenschap “stijl” zo in te stellen dat de kleur van het specifieke HTML-element wordt gewijzigd.
HTML code
Ga eerst door de gegeven HTML-code:
< h2 > Gebruik de stijl Property in JavaScript h2 >
< h3 tel = 'H3' > Tweede onderkop. h3 >
In de bovenstaande coderegels:
- De ' ” HTML-tag specificeert de eerste subkop.
- De ' ” tag creëert de tweede subkop van niveau 3 met een toegewezen id “H3”.
JavaScript-code
Volg vervolgens de vermelde JavaScript-code:
< script >document. getElementById ( 'H3' ) . stijl . kleur = 'groente' ;
script >
In het bovenstaande codefragment, de ' document.getElementById() ' methode geeft toegang tot de meegeleverde ' 'element via zijn id' H3 ” om de gespecificeerde “ kleur ” attribuutwaarde van het element via de “ stijl.kleur ' eigendom.
Uitgang
De uitvoer laat zien dat de beoogde visuele weergave van het HTML-element dienovereenkomstig is ingesteld met behulp van de eigenschap 'style'.
Voorbeeld 2: gebruik de eigenschap 'stijl' om de waarde van het toegepaste kenmerk 'stijl' te verkrijgen
In dit voorbeeld helpt de eigenschap 'style' bij het vinden van het toegewezen 'style' -kenmerk van het HTML-element met behulp van de algemene syntaxis (Return a style Property).
HTML code
De HTML-code wordt hier vermeld:
< h2 > Gebruik de stijl Property in JavaScript h2 >< h3 tel = 'H3' stijl = 'achtergrondkleur:oranje;' > De waarde van de achtergrondkleur van de tweede subkop is : h3 >
< h4 tel = 'demonstratie' > h4 >
In deze code:
- De ' ” HTML-tag gebruikt het kenmerk 'style' dat de achtergrondkleur van het HTML-element '
' instelt.
- De ' ” tag creëert een lege subkop van niveau 4 met een id “ demo ”.
JavaScript-code
Kijk nu naar de gegeven JavaScript-code:
< script >const waarde = document. getElementById ( 'H3' ) . stijl . Achtergrond kleur ;
document. getElementById ( 'demonstratie' ) . binnenHTML = waarde ;
script >
In de hierboven geschreven code:
- De variabele “ waarde ” wordt aangegeven met een “ const ” trefwoord dat de “ document.getElementById() '-methode om het '
'-element op te halen met behulp van zijn id om de waarde van het toegepaste 'style'-attribuut op te halen en toe te passen op het element, d.w.z. '
' via de 'style'-eigenschap.
- De methode 'document.getElementById()' wordt opnieuw gebruikt om toegang te krijgen tot het toegevoegde lege '
'-element en de waarde van het toegewezen 'style'-attribuut weer te geven ten opzichte van het opgehaalde HTML-element en het toe te voegen als een subkop via de ' binnenHTML ' eigendom.
Uitgang
De uitvoer past de achtergrondkleur toe op het element en de waarde van het ingestelde 'style'-attribuut wordt ook dienovereenkomstig geretourneerd.
Conclusie
JavaScript gebruikt de ' stijl ” eigenschap om de inline “style” eigenschappen van het HTML DOM element toe te wijzen en te retourneren. Het vereist een extra 'waarde' om de gewenste functionaliteit dienovereenkomstig toe te passen. Naast het instellen en ophalen, is het ook nuttig om het bestaande kenmerk 'stijl' te wijzigen. Deze gids demonstreerde het hoofddoel, de werking en de praktische implementatie van de HTML DOM Element Style Property.