一、可以通過(guò)DOM節(jié)點(diǎn)對(duì)象的style對(duì)象(即CSSStyleDeclaration對(duì)象)來(lái)讀寫(xiě)文檔元素的CSS樣式 如：var elm = document.getElementById('test'); elm.style.color = 'black'; 二、通過(guò)Element對(duì)象的getAttribute()、setAttribute()、removeAttribute()直接讀寫(xiě)style屬性 如：elm.setAttribute('style','color:red;line-height:30px'); 三、通過(guò)CSSStyleDeclaration對(duì)象的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ī)則的樣式聲明部分（大括號(hào)內(nèi)部的部分），都是一個(gè)CSSStyleDeclaration對(duì)象，它的屬性和方法： 屬性： 1.cssText：當(dāng)前規(guī)則的所有樣式聲明文本。該屬性可讀寫(xiě)，即可用來(lái)設(shè)置當(dāng)前規(guī)則。 2.length：當(dāng)前規(guī)則包含多少條聲明。 3.parentRule：包含當(dāng)前規(guī)則的那條規(guī)則，同CSSRule接口的parentRule屬性。 方法： 1.getPropertyPriority()方法返回指定聲明的優(yōu)先級(jí)，如果有的話，就是“important”，否則就是空字符串； 2.getPropertyValue方法返回指定聲明的值； 3.item(index)方法返回指定位置的屬性名，一般用[index]語(yǔ)法更直接； 4.removeProperty方法用于刪除一條CSS屬性，返回被刪除的值； 5.setProperty方法用于設(shè)置指定的CSS屬性，沒(méi)有返回值; 四、利用document.styleSheets屬性，返回當(dāng)前頁(yè)面的所有StyleSheet對(duì)象（即所有樣式表），它是一個(gè)只讀的類數(shù)組對(duì)象，它的元素是CSSStyleSheet對(duì)象(繼承自StyleSheet對(duì)象)，該對(duì)象的屬性方法如下： 屬性： 1.cssRules類數(shù)組對(duì)象，元素是樣式表中CSS規(guī)則CSSStyleRule對(duì)象；IE9以下為rules； 2.disabled屬性用于打開(kāi)或關(guān)閉一張樣式表，值為true或disabled； 3.ownerNode屬性返回StyleSheet對(duì)象所在的DOM節(jié)點(diǎn)，通常是<link>或<style>。對(duì)于那些由其他樣式表引用的樣式表，該屬性為null； 4.因?yàn)镃SS的@import命令允許在樣式表中加載其他樣式表，就有了parentStyleSheet屬性，它返回包括了當(dāng)前樣式表的那張樣式表。如果當(dāng)前樣式表是頂層樣式表，則該屬性返回null； 5.type屬性返回StyleSheet對(duì)象的type值，通常是text/css； 6.title屬性返回StyleSheet對(duì)象的title值； 7.href屬性是只讀屬性，返回StyleSheet對(duì)象連接的樣式表地址。對(duì)于內(nèi)嵌的style節(jié)點(diǎn)，該屬性等于null； 8.media屬性表示這個(gè)樣式表是用于屏幕（screen），還是用于打印（print），或兩者都適用（all），該屬性只讀，默認(rèn)值是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; //返回當(dāng)前規(guī)則的所有樣式聲明字符串 五、用window對(duì)象的getComputedStyle方法，第一個(gè)參數(shù)是Element對(duì)象，第二個(gè)參數(shù)可以是null、空字符串、偽元素字符串，該方法返回一個(gè)只讀的表示計(jì)算樣式的CSSStyleDeclaration對(duì)象，它代表了實(shí)際應(yīng)用在指定元素上的最終樣式信息，即各種CSS規(guī)則疊加后的結(jié)果； 如：var color = window.getComputedStyle(elm, ':before').color; var color = window.getComputedStyle(elm, ':before').getPropertyValue('color'); 或：var color = window.getComputedStyle(elm, null).color; 表示計(jì)算樣式的CSSStyleDeclaration對(duì)象與表示內(nèi)聯(lián)樣式的CSSStyleDeclaration對(duì)象的區(qū)別： 1.計(jì)算樣式的屬性是只讀的； 2.計(jì)算樣式的值是絕對(duì)值，類似百分比和點(diǎn)之類相對(duì)的單位將全部轉(zhuǎn)換為以'px'為后綴的字符串絕對(duì)值，其值是顏色的屬性將以“rgb（#，#，#）”或“rgba（#，#，#，#）”的格式返回; 3.不計(jì)算復(fù)合屬性，只基于最基礎(chǔ)的屬性，如不要查詢margin，而單獨(dú)查詢marginTop等; 4.計(jì)算樣式對(duì)象未定義cssText屬性； 5.計(jì)算樣式同時(shí)具有欺騙性，使用時(shí)需注意，在查詢某些屬性時(shí)的返回值不一定精準(zhǔn)，如查詢font-family； 6.IE9以下不支持getComputedStyle方法，IE的Element對(duì)象有currentStyle屬性； 六、直接添加樣式表 1.創(chuàng)建標(biāo)簽<style>添加一張內(nèi)置樣式表 var style1 = document.createElement('style'); style1.innerHTML = 'body{color:red}#top:hover{color: white;}'; document.head.appendChild(style1); 2.另一種是添加外部樣式表，即在文檔中添加一個(gè)link節(jié)點(diǎn)，然后將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方法用來(lái)檢查CSS的mediaQuery語(yǔ)句。各種瀏覽器的最新版本（包括IE 10+）都支持該方法，對(duì)于不支持該方法的老式瀏覽器，可以使用第三方函數(shù)庫(kù)matchMedia.js； 下面是mediaQuery語(yǔ)句的一個(gè)例子： @media all and (max-device-width: 700px) { body {background: #FF0;} } window.matchMedia方法接受一個(gè)mediaQuery語(yǔ)句的字符串作為參數(shù)，返回一個(gè)MediaQueryList對(duì)象。該對(duì)象有以下兩個(gè)屬性： media：返回所查詢的mediaQuery語(yǔ)句字符串。 matches：返回一個(gè)布爾值，表示當(dāng)前環(huán)境是否匹配查詢語(yǔ)句。

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

}

? ? ? ? window.matchMedia方法返回的MediaQueryList對(duì)象有兩個(gè)方法，用來(lái)監(jiān)聽(tīng)事件：addListener方法和removeListener方法。如果mediaQuery查詢結(jié)果發(fā)生變化，就調(diào)用指定的回調(diào)函數(shù)；

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

轉(zhuǎn)載于:https://www.cnblogs.com/chancy/p/7146783.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的用原生JS读写CSS样式的方法总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。