Vlastnost stylu HTML DOM
Příklad
Přidejte červenou barvu do prvku <h1>:
document.getElementById("myH1").style.color = "red";
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Vlastnost style vrací objekt CSSStyleDeclaration, který představuje atribut stylu prvku.
Vlastnost style se používá k získání nebo nastavení konkrétního stylu prvku pomocí různých vlastností CSS.
Poznámka: Styly nelze nastavit přiřazením řetězce vlastnosti stylu, např. element .style = "color: red;". Chcete-li nastavit styl prvku, připojte ke stylu vlastnost „CSS“ a zadejte hodnotu, jako je tato:
element.style.backgroundColor = "red"; // set the background color of an element to red
Jak můžete vidět, syntaxe JavaScriptu pro nastavení vlastností CSS se mírně liší od CSS (barva pozadí místo barvy pozadí).
Seznam všech dostupných vlastností naleznete v naší Referenční příručce objektu stylu .
Poznámka: Vlastnost style vrací pouze deklarace CSS nastavené v atributu stylu inline prvku, např.
<p style="color: red;">. Tuto vlastnost nelze použít k získání informací o pravidlech stylu ze sekce <head> v dokumentu nebo v externích šablonách stylů.
K prvku <style> však můžete přistupovat z <head> pomocí document.getElementsByTagName():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
Poznámka: Doporučuje se použít vlastnost style místo metody element .setAttribute("style", "...") , protože vlastnost style nepřepíše jiné vlastnosti CSS, které mohou být uvedeny v atributu style.
Podpora prohlížeče
| Property | |||||
|---|---|---|---|---|---|
| style | Yes | Yes | Yes | Yes | Yes |
Syntax
Vlastnosti stylu návratu:
element.style.property
Nastavit vlastnosti stylu:
element.style.property = value
Hodnoty vlastností
| Value | Description |
|---|---|
| value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
Technické údaje
| Návratová hodnota: | Objekt CSSStyleDeclaration představující atribut stylu prvku |
|---|---|
| Verze DOM | Dom CSS úrovně 2 |
Další příklady
Příklad
Získejte hodnotu horního okraje prvku <p>:
var x = document.getElementById("myP").style.borderTop;
Související stránky
Výukový program CSS : Výukový program CSS
CSS Reference: CSS Properties
HTML DOM Reference: Style Object Reference
HTML reference: HTML tag <style>
❮ Objekt prvku