English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML DOM style 属性

Oggetto Elemento HTML DOM

style属性设置或返回元素的内联样式。

它返回一个CSSStyleDeclaration对象,该对象包含该元素的所有样式属性的列表,并为该元素的内联样式属性中定义的属性分配了值。

语法:

返回样式属性:

element.style.property

设置样式属性:

element.style.property = value
document.getElementById("demo").style.color = "blue";
Prova a vedere‹/›

注意:无法通过将字符串分配给style属性来设置样式,例如element.style="color:blue;"。要设置元素的样式,请在样式后面附加一个"CSS"属性并指定一个值,如下所示:

element.style.backgroundColor="blue"; //将元素的背景色设置为蓝色

正如您看到的,用于设置CSS属性的JavaScript语法与CSS(backgroundColor而不是background-color)略有不同。

有关所有可用属性的列表,请参见样式对象参考

style属性对于完全了解应用于元素的样式没有用,因为它仅表示元素的内联样式属性中设置的CSS声明,而不表示来自其他地方的样式规则(例如本节中的样式规则)的CSS声明,或者外部样式表。要获取元素的所有CSS属性的值,应改用window.getComputedStyle()

但是,可以使用document.getElementsByTagName()从<head>访问<style>元素:

var x = document.getElementsByTagName("style")[0]; //获取第一个<style>元素

注意:建议使用style属性而不是Elemento .setAttribute("style", "...")方法,因为style属性不会覆盖style属性中可能指定的其他CSS属性。

浏览器兼容性

所有浏览器完全支持style属性:

属性
style

属性值

描述
value指定指定属性的值。例如,对于border属性:
element.style.border="5px azzurro puro";

Dettagli tecnici

Valore di ritorno:UnCSSStyleDeclarationOggetto che rappresenta la proprietà style dell'elemento
Versione DOM:Modello Oggetto CSS (CSSOM)

Più Esempi

Ottieni il valore del bordo superiore dell'elemento <p>:

var x = document.getElementById("demo").style.borderTop;
Prova a vedere‹/›

UsareElemento Metodo .setAttribute() per impostare lo stile CSS:

var div = document.querySelector("#myDiv");
div.setAttribute("style", "color:red; border: 1px solid blue;");
Prova a vedere‹/›

Riferimenti Correlati

Tutorial CSS:Tutorial CSS

Riferimento CSS:Completo Manuale di Proprietà CSS

Riferimento HTML:Proprietà di Stile HTML

Riferimento HTML:Etichetta <style> HTML

Oggetto Elemento HTML DOM