原生javascript取得各種CSS樣式屬性的方法實例總結

大家最熟悉的原生js操作樣式的方法非DOM中的Style物件莫屬了，但是這個方法只能取得和修改html文件中的內聯樣式，無法操作非內聯樣式（內部樣式和外部樣式表）。

取得樣式

#1.dom style

# #這個方法只能取得內聯樣式：

var text = document.getElementById('text');
var textColor = text.style.color;

// 得到textColor的值为 '#000'

2. currentStyle
##這個方法只適用於IE瀏覽器，在形式上與

element.style

相近，區別在於正如currentStyle其名——目前的樣式（css加載後的樣式），返回的是元素當前最終的CSS屬性值，包括了內部style標籤裡的樣式和外部引入的css檔案。 用法：元素.currentStyle.屬性

例如我們要取得id為box的width：

var boxWidth = document.getElementById('box').currentStyle.width;

// 得到boxWidth的值为 '200px'

#3. getComputedStyle

getComputedStyle是一個可以取得目前元素所有最終使用的CSS屬性值。傳回的是一個CSS樣式宣告物件([object CSSStyleDeclaration])，而且是唯讀的。

在相容性上，基本支援：Chrome、Firfox、IE9、Opera、Safari

用法：getComputedStyle(元素, 偽類).屬性，第二個參數如果不是偽類就設定為null吧。

var el = document.getElementById("box");
var style = window.getComputedStyle(el , ":after");

來～封裝一個通用的獲取樣式的函數

為了適用於各大主流瀏覽器，我們來寫一個函數：

// 这个函数需要传递两个参数：元素对象和样式属性名称

function getStyle(el, styleName) {

 if( el.currentStyle ) {
 
 // for IE
 return el.currentStyle[styleName];
 
 } else {
 
 // for peace
 return getComputedStyle(el, false)[styleName];
 }
 
}

接著呼叫這個函數來取得box的寬度：

var box = document.getElementById("box");

var boxWidth = getStyle(box, 'width');

這個函數並沒有考慮到對偽類別的相關操作，可以根據需要自行擴展～

getComputedStyle與style的區別？
既然都是取得樣式屬性的值，它們有啥區別呢：

只讀與可寫

getComputedStyle方法是唯讀的，只能取得樣式而不能設置，但是

element.style

既能讀也能寫。

所取得的物件範圍

getComputedStyle方法取得的是最終應用在元素上的所有CSS屬性物件（即使沒有CSS程式碼，也會將預設的祖宗八代都顯示出來）；而element.style只能取得元素style屬性中的CSS樣式。因此對於一個光禿禿的元素e388a4556c0f65e1904146cc1a846bee，getComputedStyle方法返回物件中length屬性值（如果有）就是190+(據我測試FF:192, IE9:195, Chrome:253, 不同環境結果可能有差異),而element.style就是0。

設定樣式

#1. dom style

這個不用說了吧，例如把元素的背景顏色改為紅色：

var el = document.getElementById('box');
el.style.backgroundColor = 'red';

2. cssText屬性

cssText的本質就是設定HTML 元素的style 屬性值。它是一組樣式屬性及其值的文字表示。這個文字格式化為一個 CSS 樣式表，去掉了包圍屬性和值的元素選擇器的花括號。

它的用法和innerHTML類似：

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

#

以上是原生javascript取得各種CSS樣式屬性的方法實例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！