[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) ```