Tento příspěvek popisuje cíl, fungování a použití metody „getComputedStyle()“ objektu okna v JavaScriptu.
Co dělá metoda „getComputedStyle()“ objektu okna v JavaScriptu?
' getComputedStyle() ” vrací objekt “CSSStyleDeclaration”, který obsahuje kolekci vlastností CSS a jejich hodnot. Vypočítá cílené vlastnosti stylingu prvků HTML. Kromě toho také hraje významnou roli při výpočtu vlastností stylu konkrétní části prvku HTML.
Syntax
okno. getComputedStyle ( živel , pseudoElement )
Ve výše uvedené syntaxi:
- okno: Je to globální objekt, který představuje okno prohlížeče.
- živel: Určuje konkrétní prvek HTML, jehož styl je třeba vypočítat.
- pseudoprvek: Odkazuje na část daného HTML prvku, např. první písmeno, poslední písmeno atd.
Následující část provádí praktickou ilustraci metody „getComputedStyle()“ pomocí příkladů.
HTML kód (včetně stylů CSS)
Nejprve si udělejte přehled o následujícím HTML kódu:
< hlava >
< styl >
h3{
velikost písma: 20px;
barva pozadí: zelenožlutá
}
< / styl >
< / hlava >
< tělo >
< h2 > Použijte metodu getComputedStyle() objektu Window < / h2 >
< h3 id = 'demo' > Velikost písma daného HTML elementu je: < / h3 >
< p id = 'vzorek' < / p >
Ve výše uvedených řádcích kódu:
- '
Značka ” používá uvedený styl značky “ ” HTML prvek. - V ' “, podnadpis je zahrnut do „ “
- Dále prvek „
“ s id „ demo “ určuje druhý podnadpis.
- Konečně, „ značka „se odkazuje na prázdný odstavec s id“ vzorek ” pro zobrazení vypočtených vlastností CSS cílového prvku.
Poznámka: Tento HTML kód je dodržován ve všech uvedených příkladech tohoto příspěvku.
Příklad 1: Použití metody „getComputedStyle()“ k výpočtu velikosti písma prvku HTML
Tento příklad používá metodu „getComputedStyle()“ k získání velikosti písma cílového prvku HTML.
JavaScript kód
Zvažte uvedený kód JavaScript:
< skript >konst živel = dokument. getElementById ( 'demo' ) ;
konst obj = okno. getComputedStyle ( živel )
nechat velikost = obj. getPropertyValue ( 'velikost písma' ) ;
dokument. getElementById ( 'vzorek' ) . vnitřní HTML = velikost ;
skript >
Ve výše uvedeném úryvku kódu:
- Deklarovat proměnnou ' živel “ s klíčovým slovem „const“, které využívá „ getElementById() ” pro přístup k prvku “
” přes jeho id “ demo “.
- Poté použijte „ getComputedStyle() ” metoda pro výpočet vlastností CSS načteného prvku „
“.
- Dále, „ velikost 'proměnná' použije ' getPropertyValue() “ metoda, která vrací hodnotu použité vlastnosti CSS “ velikost písma “ jako provázek.
- Nakonec metoda „getElementById()“ přistupuje k prázdnému odstavci a zobrazuje vypočítanou hodnotu vlastnosti CSS pomocí „ vnitřní HTML ' vlastnictví.
Výstup
Jak je vidět, výstup zobrazuje použitou hodnotu velikosti písma proti odpovídajícímu prvku HTML, tj. „
“.
Příklad 2: Použití metody „getComputedStyle()“ k výpočtu barvy pozadí prvku HTML
V tomto příkladu je diskutovaná metoda použita k výpočtu barvy pozadí konkrétního prvku HTML:
< skript >konst živel = dokument. getElementById ( 'demo' ) ;
konst obj = okno. getComputedStyle ( živel )
nechat bgcolor = obj. getPropertyValue ( 'barva pozadí' ) ;
dokument. getElementById ( 'vzorek' ) . vnitřní HTML = bgcolor ;
skript >
Ve výše uvedeném bloku kódu je „ getComputedStyle() metoda počítá „ barva pozadí ” prvku „
“, jehož id je „demo“ a vrací svou hodnotu jako „rgb“ prostřednictvím „ getPropertyValue() “ metoda.
Výstup
Výstup jasně ukazuje vypočítanou barvu pozadí načteného prvku HTML.
Závěr
JavaScript nabízí „ getComputedStyle() ” metoda pro výpočet vlastností stylů CSS cílového prvku HTML. Vypočítaná hodnota této metody je řetězec, který obsahuje vlastnosti CSS a jejich hodnoty. Lze jej implementovat různými způsoby pomocí JavaScriptu, aby se získaly vlastnosti CSS libovolného prvku HTML. Tento příspěvek poskytl podrobný pohled na cíl, fungování a použití metody „getComputedStyle()“ objektu okna v JavaScriptu.