Dit bericht beschrijft het doel, de werking en het gebruik van de methode 'getComputedStyle()' van een vensterobject in JavaScript.
Wat doet de 'getComputedStyle()'-methode van Window Object in JavaScript?
De ' getComputedStyle() ' methode retourneert het object 'CSSStyleDeclaration' dat een verzameling van de CSS-eigenschappen en hun waarden bevat. Het berekent de stylingeigenschappen van het beoogde HTML-element. Daarnaast speelt het ook een belangrijke rol bij het berekenen van de stylingeigenschappen van het specifieke deel van het HTML-element.
Syntaxis
raam. getComputedStyle ( element , pseudoElement )
In de bovenstaande syntaxis:
- raam: Het is het globale object dat het browservenster vertegenwoordigt.
- element: Het specificeert het specifieke HTML-element waarvan de stijl moet worden berekend.
- pseudoElement: Het verwijst naar het deel van het gegeven HTML-element, bijvoorbeeld eerste letter, laatste letter, enz.
In het volgende gedeelte wordt de praktische illustratie van de methode 'getComputedStyle()' uitgevoerd met behulp van voorbeelden.
HTML-code (inclusief CSS-stijl)
Bekijk eerst de volgende HTML-code:
< hoofd >
< stijl >
h3{
lettergrootte: 20px;
achtergrondkleur: groengeel
}
< / stijl >
< / hoofd >
< lichaam >
< h2 > Gebruik de methode getComputedStyle() van het vensterobject < / h2 >
< h3 ID kaart = 'demonstratie' > Lettergrootte van het gegeven HTML-element is: < / h3 >
< P ID kaart = 'steekproef' >< / P >
In de bovenstaande regels code:
- De '
”-tag past de vermelde stijl toe van de “ ” HTML-element. - In de '
” sectie, is een subkop opgenomen in de “ ” - Vervolgens het '
'-element met een id ' demo ” specificeert een tweede subkop.
- Als laatste de “ ” tag verwijst naar een lege paragraaf met een id “ steekproef ” voor het weergeven van de berekende CSS-eigenschappen van het beoogde element.
Opmerking: Deze HTML-code wordt gevolgd in alle vermelde voorbeelden van dit bericht.
Voorbeeld 1: de methode 'getComputedStyle()' toepassen om de lettergrootte van het HTML-element te berekenen
In dit voorbeeld wordt de methode 'getComputedStyle()' toegepast om de lettergrootte van het doel-HTML-element te verkrijgen.
JavaScript-code
Beschouw de vermelde JavaScript-code:
< script >const element = document. getElementById ( 'demonstratie' ) ;
const obj = raam. getComputedStyle ( element )
laat maat = obj. getPropertyValue ( 'lettertypegrootte' ) ;
document. getElementById ( 'steekproef' ) . binnenHTML = maat ;
script >
In het bovenstaande codefragment:
- Declareer een variabele “ element ” met een “const” trefwoord dat gebruik maakt van de “ getElementById() ” methode om toegang te krijgen tot het “
” element via zijn id “ demo ”.
- Pas daarna de ' getComputedStyle() '-methode om de CSS-eigenschappen van het opgehaalde '
'-element te berekenen.
- Vervolgens de “ maat ” variabele past de “ getPropertyValue() ' methode die de waarde van de toegepaste CSS-eigenschap retourneert ' lettertypegrootte ” als een tekenreeks.
- Ten slotte geeft de methode 'getElementById()' toegang tot de lege alinea en geeft de berekende CSS-eigenschapswaarde weer met behulp van de ' binnenHTML ' eigendom.
Uitgang
Zoals te zien is, geeft de uitvoer de toegepaste lettergroottewaarde weer ten opzichte van het overeenkomstige HTML-element, d.w.z. '
'.
Voorbeeld 2: de methode 'getComputedStyle()' toepassen om de achtergrondkleur van het HTML-element te berekenen
In dit voorbeeld wordt de besproken methode gebruikt om de achtergrondkleur van het specifieke HTML-element te berekenen:
< script >const element = document. getElementById ( 'demonstratie' ) ;
const obj = raam. getComputedStyle ( element )
laat bgcolor = obj. getPropertyValue ( 'Achtergrond kleur' ) ;
document. getElementById ( 'steekproef' ) . binnenHTML = bgkleur ;
script >
In het bovenstaande codeblok, de ' getComputedStyle() ” methode berekent de “ Achtergrond kleur ' van het '
'-element waarvan de id 'demo' is en de waarde retourneert als 'rgb' via de ' getPropertyValue() ” methode.
Uitgang
De uitvoer toont duidelijk de berekende achtergrondkleur van het opgehaalde HTML-element.
Conclusie
JavaScript biedt de “ getComputedStyle() ” methode voor het berekenen van de CSS-stijleigenschappen van het doel-HTML-element. De berekende waarde van deze methode is een tekenreeks die de CSS-eigenschappen en hun waarden bevat. Het kan op verschillende manieren worden geïmplementeerd met behulp van JavaScript om de CSS-eigenschappen van elk HTML-element te krijgen. Dit bericht gaf een gedetailleerd overzicht van het doel, de werking en het gebruik van de methode 'getComputedStyle()' van het vensterobject in JavaScript.