[https://www.runoob.com/jsref/obj-cssstyledeclaration.html](https://www.runoob.com/jsref/obj-cssstyledeclaration.html) ## **CSSStyleDeclaration 对象属性** | 属性 | 描述 | | --- | --- | | [cssText](https://www.runoob.com/jsref/prop-cssstyle-csstext.html) | 设置或返回样式声明文本，cssText 对应的是 HTML 元素的 style 属性。 | | [length](https://www.runoob.com/jsref/prop-cssstyle-length.html) | 返回样式中包含多少条声明。 | | [parentRule](https://www.runoob.com/jsref/prop-cssstyle-parentrule.html) | 返回包含当前规则的规则。 | ## **CSSStyleDeclaration 对象方法** | 方法 | 描述 | | --- | --- | | [getPropertyPriority()](https://www.runoob.com/jsref/met-cssstyle-getpropertypriority.html) | 返回指定的 CSS 属性是否设置了 "important!" 属性。 | | [getPropertyValue()](https://www.runoob.com/jsref/met-cssstyle-getpropertyvalue.html) | 返回指定的 CSS 属性值。 | | [item()](https://www.runoob.com/jsref/met-cssstyle-item.html) | 通过索引方式返回 CSS 声明中的 CSS 属性名。 | | [removeProperty()](https://www.runoob.com/jsref/met-cssstyle-removeproperty.html) | 移除 CSS 声明中的 CSS 属性。 | | [setProperty()](https://www.runoob.com/jsref/met-cssstyle-setproperty.html) | 在 CSS 声明块中新建或者修改 CSS 属性。 | >[danger]注意外联样式中添加了!important时优先级最高，此时设置此内联样式无效果 获取CSSStyleDeclaration对象 ~~~ element.style getComputedStyle(box,null); ~~~ 设置或返回HTML 元素的 style 属性 ``` element.style.cssText="width:400px;height:400px;"; //也可以单独设置内联样式 element.style.width="400px"; element.style.height="400px"; //读取内联样式： element.style.height //读取当前生效的样式（只有ie支持）：element.currentStyle.样式名 element.currentStyle.width //读取当前生效的样式（ie9+和其他浏览器）：getComputedStyle("标签节点对象",伪元素),如果指定的样式没有设置，则会获取到动态的真实值，而不是默认的auto等 var box=document.getElementById("box"); var style=getComputedStyle(box,null); style.width; style.height; getComputedStyle(box,after); //兼容IE8及以下 var box=document.getElementById("box"); function getStyle(obj,name){ if (window.getComputedStyle) { return getComputedStyle(obj,null)[name]; } else{ return obj.currentStyle[name]; } } var style=getStyle(parent_ul,"width"); console.log(style) ```