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>标记