Ten post opisuje cel, działanie i użycie metody „getComputedStyle()” obiektu okna w JavaScript.
Co robi metoda „getComputedStyle()” obiektu Window w JavaScript?
„ getComputedStyle() ” zwraca obiekt „CSSStyleDeclaration”, który zawiera zbiór właściwości CSS i ich wartości. Oblicza docelowe właściwości stylizacji elementu HTML. Ponadto odgrywa również znaczącą rolę w obliczaniu właściwości stylizacyjnych określonej części elementu HTML.
Składnia
okno. getComputedStyle ( element , pseudoelement )
W powyższej składni:
- okno: Jest to obiekt globalny reprezentujący okno przeglądarki.
- element: Określa konkretny element HTML, którego styl należy obliczyć.
- pseudoelement: Odnosi się do części danego elementu HTML, np. pierwszej litery, ostatniej litery itp.
Poniższa sekcja przedstawia praktyczną ilustrację metody „getComputedStyle()” za pomocą przykładów.
Kod HTML (w tym styl CSS)
Najpierw zapoznaj się z następującym kodem HTML:
< głowa >
< styl >
h3{
rozmiar czcionki: 20px;
kolor tła: zielonożółty
}
< / styl >
< / głowa >
< ciało >
< h2 > Użyj metody getComputedStyle() obiektu Window < / h2 >
< h3 ID = 'próbny' > Rozmiar czcionki danego elementu HTML to: < / h3 >
< P ID = 'próbka' >< / P >
W powyższych liniach kodu:
- „
” stosuje deklarowaną stylizację „ Element HTML. - W '
”, w sekcji „ ” - Następnie element „
” o identyfikatorze „ próbny ” określa drugi podtytuł.
- Wreszcie „ ” tag odnosi się do pustego akapitu o identyfikatorze „ próbka ” do wyświetlania obliczonych właściwości CSS elementu docelowego.
Notatka: Ten kod HTML jest stosowany we wszystkich podanych przykładach tego postu.
Przykład 1: Zastosowanie metody „getComputedStyle()” do obliczenia rozmiaru czcionki elementu HTML
W tym przykładzie zastosowano metodę „getComputedStyle()” w celu uzyskania rozmiaru czcionki docelowego elementu HTML.
Kod JavaScript
Rozważ podany kod JavaScript:
< scenariusz >konst element = dokument. getElementById ( 'próbny' ) ;
konst obj = okno. getComputedStyle ( element )
niech rozmiar = obj. pobierzWłaściwośćWartość ( 'rozmiar czcionki' ) ;
dokument. getElementById ( 'próbka' ) . wewnętrzny HTML = rozmiar ;
scenariusz >
W powyższym fragmencie kodu:
- Zadeklaruj zmienną „ element ” ze słowem kluczowym „const”, które wykorzystuje „ getElementById() ” metoda dostępu do elementu „
” poprzez jego identyfikator „ próbny ”.
- Następnie zastosuj „ getComputedStyle() ” do obliczenia właściwości CSS pobranego elementu „
”.
- Następnie „ rozmiar ” zmienna stosuje „ getPropertyValue() ” metoda zwracająca wartość zastosowanej właściwości CSS „ rozmiar czcionki ” jako ciąg znaków.
- Na koniec metoda „getElementById()” uzyskuje dostęp do pustego akapitu i wyświetla obliczoną wartość właściwości CSS za pomocą „ wewnętrzny HTML ' nieruchomość.
Wyjście
Jak widać, dane wyjściowe wyświetlają zastosowaną wartość rozmiaru czcionki w odniesieniu do odpowiedniego elementu HTML, tj. „
”.
Przykład 2: Zastosowanie metody „getComputedStyle()” do obliczenia koloru tła elementu HTML
W tym przykładzie omówiona metoda została wykorzystana do obliczenia koloru tła określonego elementu HTML:
< scenariusz >konst element = dokument. getElementById ( 'próbny' ) ;
konst obj = okno. getComputedStyle ( element )
niech bgcolor = obj. pobierzWłaściwośćWartość ( 'kolor tła' ) ;
dokument. getElementById ( 'próbka' ) . wewnętrzny HTML = bgkolor ;
scenariusz >
W powyższym bloku kodu „ getComputedStyle() ” metoda oblicza „ kolor tła ” elementu „
”, którego id to „demo” i zwraca jego wartość jako „rgb” za pośrednictwem „ getPropertyValue() ' metoda.
Wyjście
Dane wyjściowe wyraźnie pokazują obliczony kolor tła pobranego elementu HTML.
Wniosek
JavaScript oferuje „ getComputedStyle() ” do obliczania właściwości stylu CSS docelowego elementu HTML. Obliczoną wartością tej metody jest ciąg zawierający właściwości CSS i ich wartości. Można go zaimplementować na różne sposoby za pomocą JavaScript, aby uzyskać właściwości CSS dowolnego elementu HTML. Ten post zawiera szczegółowy widok celu, działania i użycia metody „getComputedStyle()” obiektu okna w JavaScript.