通過Element對象的getAttribute()、setAttribute()、removeAttribute()直接讀寫style屬性

如：elm.setAttribute('style','color:red;line-height:30px');

利用document.styleSheets屬性，返回當前頁面的所有StyleSheet對象(即所有樣式表)，它是一個只讀的類數組對象，它的元素是CSSStyleSheet對象(繼承自StyleSheet對象)，該對象的屬性方法如下：

屬性：

1.cssRules類數組對象，元素是樣式表中CSS規則CSSStyleRule對象；IE9以下為rules；

2.disabled屬性用于打開或關閉一張樣式表，值為true或disabled；

3.ownerNode屬性返回StyleSheet對象所在的DOM節點，通常是或

4.因為CSS的@import命令允許在樣式表中加載其他樣式表，就有了parentStyleSheet屬性，它返回包括了當前樣式表的那張樣式表。如果當前樣式表是頂層樣式表，則該屬性返回null；

5.type屬性返回StyleSheet對象的type值，通常是text/css；

6.title屬性返回StyleSheet對象的title值；

7.href屬性是只讀屬性，返回StyleSheet對象連接的樣式表地址。對于內嵌的style節點，該屬性等于null；

8.media屬性表示這個樣式表是用于屏幕(screen)，還是用于打印(print)，或兩者都適用(all)，該屬性只讀，默認值是screen；

方法：deleteRule()從樣式表中刪除一條規則，insertRule()向樣式表中插入一條新規則，IE9以下為addRule()、removeRule()；

如： document.styleSheets[0].insertRule('#test:hover{color: white;}',0);

document.styleSheets[0].deleteRule(0); //刪除樣式表中的第一條規則

document.styleSheets[0].cssRules[1].selectorText; //返回選擇器字符串

document.styleSheets[0].cssRules[1].cssText; //返回規則字符串，含選擇器

document.styleSheets[0].cssRules[1].style.border;

document.styleSheets[0].cssRules[1].style.cssText; //返回當前規則的所有樣式聲明字符串

可以通過DOM節點對象的style對象(即CSSStyleDeclaration對象)來讀寫文檔元素的CSS樣式

如：var elm = document.getElementById('test');elm.style.color = 'black';

直接添加樣式表

1.創建標簽

var style1 = document.createElement('style');

style1.innerHTML = 'body{color:red}#top:hover{background-color: red;color: white;}';

document.head.appendChild(style1);

2.另一種是添加外部樣式表，即在文檔中添加一個link節點，然后將href屬性指向外部樣式表的URL

var link1 = document.createElement('link');

link1.setAttribute('rel', 'stylesheet');

link1.setAttribute('type', 'text/css');

link1.setAttribute('href', 'reset-min.css');

document.head.appendChild(link1);

用window對象的getComputedStyle方法，第一個參數是Element對象，第二個參數可以是null、空字符串、偽元素字符串，該方法返回一個只讀的表示計算樣式的CSSStyleDeclaration對象，它代表了實際應用在指定元素上的最終樣式信息，即各種CSS規則疊加后的結果；

如：var color = window.getComputedStyle(elm, ':before').color;

var color = window.getComputedStyle(elm, ':before').getPropertyValue('color');

或：var color = window.getComputedStyle(elm, null).color;

表示計算樣式的CSSStyleDeclaration對象與表示內聯樣式的CSSStyleDeclaration對象的區別：

1.計算樣式的屬性是只讀的；

2.計算樣式的值是絕對值，類似百分比和點之類相對的單位將全部轉換為以'px'為后綴的字符串絕對值，其值是顏色的屬性將以“rgb(#，#，#)”或“rgba(#，#，#，#)”的格式返回;

3.不計算復合屬性，只基于最基礎的屬性，如不要查詢margin，而單獨查詢marginTop等;

4.計算樣式對象未定義cssText屬性；

5.計算樣式同時具有欺騙性，使用時需注意，在查詢某些屬性時的返回值不一定精準，如查詢font-family；

6.IE9以下不支持getComputedStyle方法，IE的Element對象有currentStyle屬性；

通過CSSStyleDeclaration對象的cssText屬性和setProperty()、removeProperty等方法

如：elm.style.cssText ='color:red;line-height:30px';

elm.style.removeProperty('color');

elm.style.setProperty('color', 'green', 'important');

elm.style.cssText = ''; //快速清空該規則的所有聲明

每一條CSS規則的樣式聲明部分(大括號內部的部分)，都是一個CSSStyleDeclaration對象，它的屬性和方法：

屬性：

1.cssText：當前規則的所有樣式聲明文本。該屬性可讀寫，即可用來設置當前規則。

2.length：當前規則包含多少條聲明。

3.parentRule：包含當前規則的那條規則，同CSSRule接口的parentRule屬性。

方法：

1.getPropertyPriority()方法返回指定聲明的優先級，如果有的話，就是“important”，否則就是空字符串；

2.getPropertyValue方法返回指定聲明的值；

3.item(index)方法返回指定位置的屬性名，一般用[index]語法更直接；

4.removeProperty方法用于刪除一條CSS屬性，返回被刪除的值；

5.setProperty方法用于設置指定的CSS屬性，沒有返回值;

window.matchMedia方法用來檢查CSS的mediaQuery語句。各種瀏覽器的最新版本(包括IE 10+)都支持該方法，對于不支持該方法的老式瀏覽器，可以使用第三方函數庫matchMedia.js；

下面是mediaQuery語句的一個例子：

@media all and (max-device-width: 700px) {

body {background: #FF0;}

}

window.matchMedia方法接受一個mediaQuery語句的字符串作為參數，返回一個MediaQueryList對象。該對象有以下兩個屬性：

media：返回所查詢的mediaQuery語句字符串。

matches：返回一個布爾值，表示當前環境是否匹配查詢語句。

var result = window.matchMedia('(max-width: 700px)');

if (result.matches) {

console.log('頁面寬度小于等于700px');

} else {

console.log('頁面寬度大于700px');

}

window.matchMedia方法返回的MediaQueryList對象有兩個方法，用來監聽事件：addListener方法和removeListener方法。如果mediaQuery查詢結果發生變化，就調用指定的回調函數；

var mql =? window.matchMedia("(max-width: 700px)");

mql.addListener(mqCallback);// 指定回調函數

mql.removeListener(mqCallback);// 撤銷回調函數

function mqCallback(mql) {

if (mql.matches) {// 寬度小于等于700像素}

else { // 寬度大于700像素}

}

本文參考：

MDN： https://developer.mozilla.org/zh-CN/docs/Web/API

https://www.cnblogs.com/susufufu/p/5749922.html

總結

以上是生活随笔為你收集整理的css原生样式支持,原生JS读写CSS样式的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。