Det här inlägget skriver ner målet, arbetet och användningen av metoden 'getComputedStyle()' för fönsterobjekt i JavaScript.
Vad gör 'getComputedStyle()'-metoden för Window Object i JavaScript?
den ' getComputedStyle() ”-metoden returnerar objektet “CSSStyleDeclaration” som innehåller en samling av CSS-egenskaperna och deras värden. Den beräknar de riktade HTML-elementets stilegenskaper. Dessutom spelar det också en viktig roll för att beräkna stilegenskaperna för den specifika delen av HTML-elementet.
Syntax
fönster. getComputedStyle ( element , pseudoElement )
I ovanstående syntax:
- fönster: Det är det globala objektet som representerar webbläsarfönstret.
- element: Den anger det särskilda HTML-element vars stil måste beräknas.
- pseudoElement: Det hänvisar till den del av det givna HTML-elementet, t.ex. första bokstaven, sista bokstaven, etc.
Följande avsnitt utför den praktiska illustrationen av metoden 'getComputedStyle()' med hjälp av exempel.
HTML-kod (inklusive CSS-styling)
Ta först en översikt över följande HTML-kod:
< huvud >
< stil >
h3{
teckensnittsstorlek: 20px;
bakgrundsfärg: gröngul
}
< / stil >
< / huvud >
< kropp >
< h2 > Använd metoden getComputedStyle() för Window Object < / h2 >
< h3 id = 'demo' > Teckenstorleken för det givna HTML-elementet är: < / h3 >
< sid id = 'prov' >< / sid >
I kodraderna ovan:
- den '
'-taggen tillämpar den angivna stilen för ' ' HTML-element. - I '
', ingår en underrubrik i ' ” - Därefter elementet '
' som har ett id ' demo ” specificerar en andra underrubrik.
- Slutligen, ' '-taggen hänvisar till ett tomt stycke med ett id ' prov ” för att visa de beräknade CSS-egenskaperna för målelementet.
Notera: Denna HTML-kod följs genom alla de angivna exemplen i detta inlägg.
Exempel 1: Använda metoden 'getComputedStyle()' för att beräkna teckenstorleken för HTML-elementet
Det här exemplet tillämpar metoden 'getComputedStyle()' för att få teckenstorleken för HTML-målelementet.
JavaScript-kod
Tänk på den angivna JavaScript-koden:
< manus >konst element = dokumentera. getElementById ( 'demo' ) ;
konst obj = fönster. getComputedStyle ( element )
låt storlek = obj. getPropertyValue ( 'textstorlek' ) ;
dokumentera. getElementById ( 'prov' ) . innerHTML = storlek ;
manus >
I kodavsnittet ovan:
- Deklarera en variabel ' element ' med ett 'const' nyckelord som använder ' getElementById() '-metoden för att komma åt '
'-elementet via dess id ' demo ”.
- Efter det, använd ' getComputedStyle() ”-metoden för att beräkna CSS-egenskaperna för det hämtade “
”-elementet.
- Därefter ' storlek variabeln tillämpar getPropertyValue() ” metod som returnerar värdet av den tillämpade CSS-egenskapen ” textstorlek ” som ett snöre.
- Slutligen kommer metoden 'getElementById()' åt det tomma stycket och visar det beräknade CSS-egenskapsvärdet med hjälp av ' innerHTML ' fast egendom.
Produktion
Som sett visar utdata det tillämpade teckensnittsstorleksvärdet mot motsvarande HTML-element, dvs. '
'.
Exempel 2: Använda metoden 'getComputedStyle()' för att beräkna bakgrundsfärgen för HTML-elementet
I det här exemplet används den diskuterade metoden för att beräkna bakgrundsfärgen för det specifika HTML-elementet:
< manus >konst element = dokumentera. getElementById ( 'demo' ) ;
konst obj = fönster. getComputedStyle ( element )
låt bgcolor = obj. getPropertyValue ( 'bakgrundsfärg' ) ;
dokumentera. getElementById ( 'prov' ) . innerHTML = bgcolor ;
manus >
I kodblocket ovan visas ' getComputedStyle() '-metoden beräknar ' bakgrundsfärg ' av elementet '
' vars id är 'demo' och returnerar dess värde som 'rgb' via ' getPropertyValue() 'metoden.
Produktion
Utdata visar tydligt den beräknade bakgrundsfärgen för det hämtade HTML-elementet.
Slutsats
JavaScript erbjuder ' getComputedStyle() ”-metod för att beräkna CSS-stilegenskaperna för HTML-målelementet. Det beräknade värdet för denna metod är en sträng som innehåller CSS-egenskaperna och deras värden. Det kan implementeras på olika sätt med JavaScript för att få CSS-egenskaperna för alla HTML-element. Det här inlägget gav en detaljerad bild av målet, arbetet och användningen av metoden 'getComputedStyle()' för fönsterobjektet i JavaScript.