最近學習中遇到這個問題，為了日後方便查詢，本人翻閱了一些資料總結了以下方法，僅限原生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樣式。因此對於一個光禿禿的元素
，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中文網！
