原生javascript實(shí)現(xiàn)讀寫CSS樣式的方法詳解

前言

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

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

我通過搜索和整理，總結(jié)了使用原生js對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樣式聲明對象([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ù)：元素對象和樣式屬性名稱

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ù)并沒有考慮到對偽類的相關(guān)操作，可以根據(jù)需要自行擴(kuò)展～

getComputedStyle與style的區(qū)別？

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

只讀與可寫

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

獲取的對象范圍

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

引用自——張鑫旭博客文章

設(shè)置樣式

1. dom style

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

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

2. cssText屬性

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

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

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

總結(jié)

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