前言

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

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

我通過(guò)搜索和整理，總結(jié)了使用原生js對(duì)css樣式的讀寫(xiě)實(shí)現(xiàn)。下面話(huà)不多說(shuō)，來(lái)看看詳細(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(元素, 偽類(lèi)).屬性，第二個(gè)參數(shù)如果不是偽類(lèi)就設(shè)置為null吧。

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

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

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

// 這個(gè)函數(shù)需要傳遞兩個(gè)參數(shù)：元素對(duì)象和樣式屬性名稱(chēng)

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ù)來(lái)獲取box的寬度：

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

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

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

getComputedStyle與style的區(qū)別？

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

只讀與可寫(xiě)

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

獲取的對(duì)象范圍

getComputedStyle方法獲取的是最終應(yīng)用在元素上的所有CSS屬性對(duì)象（即使沒(méi)有CSS代碼，也會(huì)把默認(rèn)的祖宗八代都顯示出來(lái)）；而element.style只能獲取元素style屬性中的CSS樣式。因此對(duì)于一個(gè)光禿禿的元素<p>，getComputedStyle方法返回對(duì)象中l(wèi)ength屬性值（如果有）就是190+(據(jù)我測(cè)試FF:192, IE9:195, Chrome:253, 不同環(huán)境結(jié)果可能有差異), 而element.style就是0。

引用自——張?chǎng)涡癫┛臀恼?/p>

設(shè)置樣式

1. dom style

這個(gè)不用說(shuō)了吧，比如把元素的背景顏色改為紅色：

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

2. cssText屬性

cssText 的本質(zhì)就是設(shè)置 HTML 元素的 style 屬性值。它是一組樣式屬性及其值的文本表示。這個(gè)文本格式化為一個(gè) CSS 樣式表，去掉了包圍屬性和值的元素選擇器的花括號(hào)。

它的用法和innerHTML類(lèi)似： document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

詳細(xì)請(qǐng)參考： CSSRule.cssText - Web APIs | MDN

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家學(xué)習(xí)或者使用Javascript能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。謝謝大家對(duì)腳本之家的支持。

最新評(píng)論