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

一、可以通過DOM節(jié)點對象的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 = ''; //快速清空該規(guī)則的所有聲明

每一條CSS規(guī)則的樣式聲明部分（大括號內部的部分），都是一個CSSStyleDeclaration對象，它的屬性和方法：
屬性：
1.cssText：當前規(guī)則的所有樣式聲明文本。該屬性可讀寫，即可用來設置當前規(guī)則。
2.length：當前規(guī)則包含多少條聲明。
3.parentRule：包含當前規(guī)則的那條規(guī)則，同CSSRule接口的parentRule屬性。
方法：
1.getPropertyPriority()方法返回指定聲明的優(yōu)先級，如果有的話，就是“important”，否則就是空字符串；
2.getPropertyValue方法返回指定聲明的值；
3.item(index)方法返回指定位置的屬性名，一般用[index]語法更直接；
4.removeProperty方法用于刪除一條CSS屬性，返回被刪除的值；
5.setProperty方法用于設置指定的CSS屬性，沒有返回值;

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

 document.styleSheets[0].insertRule('#test:hover{color: white;}',0);
 document.styleSheets[0].deleteRule(0); //刪除樣式表中的第一條規(guī)則
 document.styleSheets[0].cssRules[1].selectorText; //返回選擇器字符串
 document.styleSheets[0].cssRules[1].cssText; //返回規(guī)則字符串，含選擇器

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

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

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

表示計算樣式的CSSStyleDeclaration對象與表示內聯(lián)樣式的CSSStyleDeclaration對象的區(qū)別：
1.計算樣式的屬性是只讀的；
2.計算樣式的值是絕對值，類似百分比和點之類相對的單位將全部轉換為以'px'為后綴的字符串絕對值，其值是顏色的屬性將以“rgb（#，#，#）”或“rgba（#，#，#，#）”的格式返回;
3.不計算復合屬性，只基于最基礎的屬性，如不要查詢margin，而單獨查詢marginTop等;
4.計算樣式對象未定義cssText屬性；
5.計算樣式同時具有欺騙性，使用時需注意，在查詢某些屬性時的返回值不一定精準，如查詢font-family；
6.IE9以下不支持getComputedStyle方法，IE的Element對象有currentStyle屬性；

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

var style1 = document.createElement('style');
 style1.innerHTML = 'body{color:red}#top:hover{background-color: red;color: white;}';
 document.head.appendChild(style1);

2.另一種是添加外部樣式表，即在文檔中添加一個link節(jié)點，然后將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+）都支持該方法，對于不支持該方法的老式瀏覽器，可以使用第三方函數(shù)庫matchMedia.js；
下面是mediaQuery語句的一個例子：

 @media all and (max-device-width: 700px) {
           body {background: #FF0;}
 
        } 

window.matchMedia方法接受一個mediaQuery語句的字符串作為參數(shù)，返回一個MediaQueryList對象。該對象有以下兩個屬性：
media：返回所查詢的mediaQuery語句字符串。
matches：返回一個布爾值，表示當前環(huán)境是否匹配查詢語句。

var result = window.matchMedia('(max-width: 700px)');
    if (result.matches) {
      console.log('頁面寬度小于等于700px');
    } else {
      console.log('頁面寬度大于700px');
 
    }

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

 var mql = window.matchMedia("(max-width: 700px)");
    mql.addListener(mqCallback);// 指定回調函數(shù)
    mql.removeListener(mqCallback);// 撤銷回調函數(shù)
 
    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權威指南第六版

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

最新評論