原生JS讀寫CSS樣式的方法
2020/11/25 17:55:43 閱讀：4281
發(fā)布者：4281
-
通過Element對象的getAttribute()、setAttribute()、removeAttribute()直接讀寫style屬性
如：elm.setAttribute('style','color:red;line-height:30px');
-
利用document.styleSheets屬性，返回當前頁面的所有StyleSheet對象（即所有樣式表），它是一個只讀的類數組對象，它的元素是CSSStyleSheet對象(繼承自StyleSheet對象)，該對象的屬性方法如下：
屬性：
1.cssRules類數組對象，元素是樣式表中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ī)則的所有樣式聲明字符串
-
可以通過DOM節(jié)點對象的style對象(即CSSStyleDeclaration對象)來讀寫文檔元素的CSS樣式
如：var elm = document.getElementById('test'); elm.style.color = 'black';
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對象的getComputedStyle方法，第一個參數是Element對象，第二個參數可以是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對象與表示內聯樣式的CSSStyleDeclaration對象的區(qū)別：
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 = ''; //快速清空該規(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屬性，沒有返回值;
-
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：返回一個布爾值，表示當前環(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ā)生變化，就調用指定的回調函數；
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
