js 修改css文件
阿新 • • 發佈：2017-07-06
看到了 分享 src rip 規則 ole rules lec 紅色 在做自動換膚設置時，無意中看到了js修改css的方法，感覺挺有用的，特來學習分享一下。好了，下面開始學習：
js的 document.styleSheets 獲取到的是引入的css的對象數組。如：
其中 CSSStyleSheet展開如下：
document.styleSheets[0] 即可得到你所應用的第一個css rules 和 cssRules 的計數方法是不一樣的！rules 是第幾個選擇器；cssRules 是第幾條規則 document.styleSheets[0].cssRules即可得到所有css文件行 document.styleSheets[0].cssRules[0] css第一條 document.styleSheets[0].cssRules[0].style.background="red"//修改第一條的背景顏色為紅色
實例：
修改標題1的字體顏色為紅色 引入的css:.wode{
color: #000;
font-size: 36px;
}
.article{
color: #333;
}
h1,h2,h3{
color: #0D9BF2;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="article">
<h1>標題一</h1>
<div class="content">內容</div>
<h2>標題二</h2>
<div class="content">內容</div>
<h3>標題三</h3>
<div class="content">內容</div>
</div>
<script>
var cssRule=document.styleSheets[0].cssRules;
console.log(cssRule);
console.log(cssRule.length);
for(var i=0;i<cssRule.length;i++){
if(cssRule[i].selectorText.indexOf("h1") != -1){
cssRule[i].style.color="red";
}
}
</script>
</body>
</html>
修改前：
修改後：
js 修改css文件