原生javascript實作讀寫CSS樣式的方法詳解

最近學習中遇到這個問題，為了日後方便查詢，本人翻閱了一些資料總結了以下方法，僅限原生JS，如有不對的地方歡迎指出！只求大家看完覺得有學到點什麼就OK了！以下這篇文章主要介紹了利用原生javascript實作讀寫CSS樣式的方法,需要的朋友可以參考下。

前言

可能大家一說起操作css樣式，很多人都會想到jQuery的css方法：$(selector) .css(name) ，但是有思考過如何使用原生js來實現類似的功能麼？

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

我透過搜尋和整理，總結了使用原生js對css樣式的讀寫實作。下面話不多說，來看看詳細的介紹吧。

取得樣式

#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中文網！