HTML DOM style 属性

HTML DOM Element 对象

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

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

语法:

返回样式属性:

element.style.property

设置样式属性:

element.style.property = value
document.getElementById("demo").style.color = "blue";
测试看看‹/›

注意:无法通过将字符串分配给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属性而不是元素 .setAttribute("style","...")方法,因为style属性不会覆盖style属性中可能指定的其他CSS属性。

浏览器兼容性

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

属性
style

属性值

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

技术细节

返回值:一个CSSStyleDeclaration对象,表示元素的style属性
DOM版本:CSS对象模型(CSSOM)

更多实例

获取<p>元素的上边界值:

var x = document.getElementById("demo").style.borderTop;
测试看看‹/›

使用元素 .setAttribute()方法设置CSS样式:

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

相关参考

CSS教程:CSS教程

CSS参考:CSS属性大全

HTML参考:HTML样式属性

HTML参考:HTML <style>标记

HTML DOM Element 对象