原生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樣式。因此對于一個光禿禿的元素<p>，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;";

詳細請參考： CSSRule.cssText - Web APIs | MDN

總結

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