為了日后方便查詢，本人翻閱了一些資料總結了以下方法，僅限原生JS，如有不對的地方歡迎指出！只求大家看完覺得有學到點什么就OK了！

一、可以通過DOM節點對象的style對象(即CSSStyleDeclaration對象)來讀寫文檔元素的CSS樣式
如：var elm = document.getElementById('test');
      elm.style.color = 'black';

二、通過Element對象的getAttribute()、setAttribute()、removeAttribute()直接讀寫style屬性
 如：elm.setAttribute('style','color:red;line-height:30px');

三、通過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屬性，沒有返回值;

四、利用document.styleSheets屬性，返回當前頁面的所有StyleSheet對象（即所有樣式表），它是一個只讀的類數組對象，它的元素是CSSStyleSheet對象(繼承自StyleSheet對象)，該對象的屬性方法如下：
屬性：
1.cssRules類數組對象，元素是樣式表中CSS規則CSSStyleRule對象；IE9以下為rules；
2.disabled屬性用于打開或關閉一張樣式表，值為true或disabled；
3.ownerNode屬性返回StyleSheet對象所在的DOM節點，通常是<link>或<style>。對于那些由其他樣式表引用的樣式表，該屬性為null；
4.因為CSS的@import命令允許在樣式表中加載其他樣式表，就有了parentStyleSheet屬性，它返回包括了當前樣式表的那張樣式表。如果當前樣式表是頂層樣式表，則該屬性返回null；
5.type屬性返回StyleSheet對象的type值，通常是text/css；
6.title屬性返回StyleSheet對象的title值；
7.href屬性是只讀屬性，返回StyleSheet對象連接的樣式表地址。對于內嵌的style節點，該屬性等于null；
8.media屬性表示這個樣式表是用于屏幕（screen），還是用于打?。╬rint），或兩者都適用（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; //返回當前規則的所有樣式聲明字符串

五、用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屬性；

六、直接添加樣式表
1.創建標簽<style>添加一張內置樣式表

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.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
阮一峰javascript參考：http://javascript.ruanyifeng.com/dom/css.html
javascript權威指南第六版

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。