JavaScript Element style 属性

style属性返回CSSStyleDeclaration对象，该对象表示元素的样式属性。style属性用于使用不同的CSS属性获取或设置元素的特定样式。

注意：无法通过为样式属性指定字符串来设置样式，例如element.style="color：red;"。要设置元素的样式，请在样式中附加“CSS”属性并指定值，如下所示：

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

如您所见，用于设置CSS属性的JavaScript语法与CSS（backgroundColor而不是background-color）略有不同。有关所有可用属性的列表，请参阅我们的Style对象参考。

注意： style属性仅返回元素的内联样式属性中设置的CSS声明，例如<p style=“color：red;”>。无法使用此属性从文档或外部样式表中的<head>部分获取有关样式规则的信息。但是，您可以使用document.getElementsByTagName()从<head>访问<style>元素：

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

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

实例：

为<h1>元素添加红色：

document.getElementById("myH1").style.color = "red";

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
属性
style	支持	支持	支持	支持	支持

语法

返回样式属性：

element.style.property

设置样式属性：

element.style.property = value

属性值

属性值	类型	描述
value	String	指定指定属性的值。例如，对于borderBottom属性：element.style.borderBottom=“2px solid red”;

技术细节

项目	描述
返回值：	CSSStyleDeclaration对象，表示元素的样式属性
DOM版本	Dom Level 2 CSS

JavaScript Element style 属性