獲取、設置及移除單個內聯 CSS 屬性

---

每個 HTML 元素都有個 style 屬性，可以用來插入針對該元素的內聯 CSS 屬性。

<div style='background-color:black; height:100px; width:100px'></div> <script>var divStyle = document.querySelector('div').style;// 輸出一個 CSSStyleDeclaration 對象，僅包含該元素的內聯樣式console.log(divStyle);// setdivStyle.backgroundColor = 'red';// getconsole.log(divStyle.backgroundColor);// remove divStyle.backgroundColor = '';// style 對象是個 CSSStyleDeclaration 對象，它不僅提供了單個 CSS 屬性的訪問方式// 也提供 setProperty()、getPropertyValue()以及removeProperty() 方法// setdivStyle.setProperty('height', '200px');// getconsole.log(divStyle.getPropertyValue('height'));// removedivStyle.removeProperty('height');</script>

注意： style 對象中的屬性名并不含 CSS 屬性名中常用的橫線。轉譯非常簡單，移除橫線并使用駝峰體。其中一個不能直接轉換的 CSS 屬性是 float，由于 float 是 Javascript 的保留字，因此不能用作屬性名。“DOM2級樣式”規范規定樣式對象上相應的屬性名應該是 cssFloat，ff、Safari、opera和chrome都支持這個屬性，而 IE 支持的則是 styleFloat。

獲取、設置及移除所有內聯 CSS 屬性

---

<div style='background-color:black; height:100px; width:100px'></div> <script>var div = document.querySelector('div'), divStyle = div.style;// 使用 CSSStyleDeclaration 對象的 cssText 屬性，和 getAttribute() 與 setAttribute() 方法// 可以用 Javascript 字符串獲取、設置及移除 style 屬性的整個值（即所有內聯 CSS 屬性）divStyle.cssText = '';divStyle.cssText = 'background-color:red; height:200px; width: 200px';// ---- div.setAttribute('style', 'background-color:blue; height:100px; width:100px');console.log(div.getAttribute('style'));div.removeAttribute('style'); </script>

使用 getComputedStyle() 獲取元素的已計算樣式

---

style 屬性值只包含通過 HTML 中的 style 屬性定義的 CSS。要獲得元素級聯包括內聯樣式后的 CSS（即從內聯樣式表單，外部樣式表單和瀏覽器樣式表單級聯），你可以用 getComputedStyle()。該方法提供一個只讀的類似 style 的 CSSStyleDeclaration 對象。這個方法接受兩個參數：要取得計算樣式的元素和一個偽元素字符串（例如":hover")，如果不需要偽元素信息，第二個參數可以為 null。

<style>div {background-color: black;width: 100px;} </style><div style='background-color:red; height:100px';></div><script>// document.defaultView 在瀏覽器中即為 window 對象var divStyle = document.defaultView.getComputedStyle(document.querySelector('div'), null);console.log(divStyle.width); // 100px </script>

getComputedStyle() 方法遵照 CSS 聲明優先級（內聯 > style > link），同時它所返回的 CSSStyleDeclaration 對象不能設定任何值，因為它是只讀的。

IE 不支持 getComputedStyle() 方法，但它有一種類似的概念，在 IE 中，每個具有 style 屬性的元素還有一個 currentStyle 屬性，這個屬性是 CSSStyleDeclaration 的實例，包含當前元素全部計算后的樣式，同樣只是可讀。

<style>div {background-color: black;width: 100px;} </style><div id='div'style='background-color:red; height:100px';></div><script>// 我也不知道為啥要用onload，去掉就報錯說找不到對象...window.onload = function() {var divStyle = document.getElementById('div').currentStyle;console.log(divStyle.width); // 100px} </script>

兼容寫法（2016-03-14 add）：

function getStyle(ele, type) {if (window.getComputedStyle) return window.getComputedStyle(ele, null)[type];else return ele.currentStyle[type]; }

總結

以上是生活随笔為你收集整理的DOM与元素节点内联样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。