轻松上手,快乐学习!

HTML DOM style 属性


实例

向 <h1> 元素添加红色:

document.getElementById("myH1").style.color = "red";
亲自试一试 »

页面下方有更多实例。


定义和用法

style 属性返回一个 CSSStyleDeclaration 对象,该对象表示元素的 style 属性。

style 属性用于使用不同的 CSS 属性获取或设置元素的特定样式。

注释: 无法通过为样式属性(例如元素)指定字符串来设置样式。 element.style = "color: red;". 要设置元素的样式,请将 "CSS" 属性附加到样式并指定一个值,如下所示:

element.style.backgroundColor = "red";   // set the background color of an element to red测试一下

如您所见,用于设置 CSS 属性的 JavaScript 语法与 CSS (backgroundColor 而非 background-color)略有不同。

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

注释: style属性只返回在元素的内联样式属性,例如
<p style="color: red;">。 无法使用此属性从文档或外部样式表的 <head> 部分获取有关样式规则的信息。

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

var x = document.getElementsByTagName("STYLE")[0];   // get the first <style> element 测试一下

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


浏览器支持

属性
style Yes Yes Yes Yes Yes

语法

返回 style 样式属性:

element.style.property

设置 style 样式属性:

element.style.property = value

属性值

描述
value 指定指定属性的值。例如,对于 borderBottom 属性:

element.style.borderBottom = "2px solid red";

技术细节

返回值: CSSStyleDeclaration 对象,表示元素的样式属性
DOM 版本 Dom Level 2 CSS

更多实例

实例

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

var x = document.getElementById("myP").style.borderTop;
亲自试一试 »

相关页面

CSS 教程: CSS 教程

CSS 参考手册: CSS Properties

HTML DOM 参考手册: Style Object Reference

HTML 参考手册: HTML <style> 标签


❮ Element 对象