style vlastnost se používá k získání i nastavení inline styl prvku DOM pomocí různých vlastností CSS. Vrací CSSStyleDeclaration objekt, který obsahuje seznam všech vlastností CSS definovaných v prvku style atribut.
style vlastnost je velmi užitečná pro dynamické změnit vizuální reprezentaci prvku HTML pomocí JavaScriptu. Můžete nastavit téměř všechny styly pro prvky, jako jsou barvy, písma, zarovnání textu, okraje, okraje, obrázky na pozadí, velikosti a další. Vložené styly se aplikují přímo na prvek HTML pomocí style atribut bez jakýchkoliv vlivů na sousední prvky.
Syntaxe
Pro přístup k style vlastnost, můžete použít getElementById() metodou, jak je uvedeno níže:
const elem = document.getElementById('sidebar');
// get CSS property
console.log(elem.style.display);
// set CSS property
elem.style.display = 'block';
Podívejte se na tuto příručku, kde se dozvíte o různých metodách přístupu k prvkům DOM v JavaScriptu.
Příklady
Následující příklad ukazuje, jak změnit barvu a font Vlastnosti CSS prvku HTML s id="about" pomocí style vlastnost:
const elem = document.getElementById('about');
// change text color to blue
elem.style.color= 'blue';
// change fonts
elem.style.fontWeight = 'bold';
elem.style.fontSize = '18px';
Výše uvedený kód změní barvu textu prvku HTML na modrou, ztučně a nastaví velikost písma na 18px .
Nemůžete nastavte vlastnost CSS přiřazením řetězce přímo vlastnosti style:
// set property directly (wrong)
elem.style = 'color: blue';
style vlastnost je pouze připravena , jako style Atribut vrací hodnotu CSSStyleDeclaration pouze pro čtení objekt. Místo toho můžete použít style vlastnost pro nastavení nebo získání jednotlivé vlastnosti CSS. Přednostně byste měli použít style vlastnost pro nastavení konkrétních stylů prvku HTML beze změny hodnot jiných stylů.
Úplné přepsání existující vložené styly pro prvek, style vlastnost poskytuje cssText atribut:
elem.style.cssText = 'color: blue; font-weight: bold; font-size: 18px';
Případně můžete použít setProperty() prvku metoda k určení style hodnota atributu:
elem.setAttribute('style', 'color: blue; font-weight: bold; font-size: 18px');
Podívejte se na tuto příručku a zjistěte všechny vlastnosti CSS přístupné pomocí style vlastnost.
Konvence pojmenování
Jak můžete vidět výše, JavaScriptový způsob nastavení vlastností CSS se mírně liší od CSS. Mnoho vlastností CSS obsahuje pomlčku (- ) v jejich názvech, například font-weight , font-size , text-align , atd. Vzhledem k tomu, že pomlčka je vyhrazený operátor a interpretuje se jako znaménko mínus v JavaScriptu, není možné použít pomlčku ve výrazu .např. elem.style.font-size='12px' .
Proto jsou v JavaScriptu názvy vlastností CSS v případě camel. Pomlčky jsou odstraněny a bezprostřední písmeno za každou pomlčkou je velké. Například vlastnost CSS font-size se stane vlastností DOM fontSize , background-color se změní na backgroundColor , border-left-color se změní na borderLeftColor , a tak dále.