前言

可能大家一說起操作css樣式，很多人都會(huì)想到j(luò)Query的css方法：$(selector).css(name) ，但是有思考過如何使用原生js來實(shí)現(xiàn)類似的功能么？

大家最熟悉的原生js操作樣式的方法非DOM中的Style對(duì)象莫屬了，但是這個(gè)方法只能獲取和修改html文檔中的內(nèi)聯(lián)樣式，無法操作非內(nèi)聯(lián)樣式（內(nèi)部樣式和外部樣式表）。

我通過搜索和整理，總結(jié)了使用原生js對(duì)css樣式的讀寫實(shí)現(xiàn)。下面話不多說，來看看詳細(xì)的介紹吧。

獲取樣式

1. dom style

這個(gè)方法只能獲取內(nèi)聯(lián)樣式：

var text = document.getElementById('text');var textColor = text.style.color;// 得到textColor的值為 '#000'

2. currentStyle

這個(gè)方法只適用于IE瀏覽器，在形式上與element.style相近，區(qū)別在于正如currentStyle其名——目前的樣式（css加載后的樣式），返回的是元素當(dāng)前最終的CSS屬性值，包括了內(nèi)部style標(biāo)簽里的樣式和外部引入的css文件。

用法：元素.currentStyle.屬性

比如我們要獲取id為box的width：

var boxWidth = document.getElementById('box').currentStyle.width;// 得到boxWidth的值為 '200px'

3. getComputedStyle

getComputedStyle是一個(gè)可以獲取當(dāng)前元素所有最終使用的CSS屬性值。返回的是一個(gè)CSS樣式聲明對(duì)象([object CSSStyleDeclaration])，并且是只讀的。

在兼容性上，基本支持：Chrome、Firfox、IE9、Opera、Safari

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

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

來～封裝一個(gè)通用的獲取樣式的函數(shù)

為了適用于各大主流瀏覽器，我們來寫一個(gè)函數(shù)：

// 這個(gè)函數(shù)需要傳遞兩個(gè)參數(shù)：元素對(duì)象和樣式屬性名稱function getStyle(el, styleName) { if( el.currentStyle ) {  // for IE return el.currentStyle[styleName];  } else {  // for peace return getComputedStyle(el, false)[styleName]; } }

接著調(diào)用這個(gè)函數(shù)來獲取box的寬度：

var box = document.getElementById("box");var boxWidth = getStyle(box, 'width');

這個(gè)函數(shù)并沒有考慮到對(duì)偽類的相關(guān)操作，可以根據(jù)需要自行擴(kuò)展～

getComputedStyle與style的區(qū)別？

既然都是獲取樣式屬性的值，它們有啥區(qū)別呢：

只讀與可寫

getComputedStyle方法是只讀的，只能獲取樣式而不能設(shè)置，但是element.style既能讀也能寫。

獲取的對(duì)象范圍

getComputedStyle方法獲取的是最終應(yīng)用在元素上的所有CSS屬性對(duì)象（即使沒有CSS代碼，也會(huì)把默認(rèn)的祖宗八代都顯示出來）；而