原⽣JS修改CSS属性
原⽣JS修改CSS属性有以下三种⽅法
1. 修改style样式
通过document.styleSheets[n] // n表⽰期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式。（此⽅法⽐较⿇烦，需要清楚指定样式在样式表的顺序）
2. 修改特定元素节点的style内容
cssText可以⼀次性修改多个css属性
style.attrName 修改单个属性 attrName的值
3. 通过setAttribute 修改style属性值
HTML代码
<div class="test" >TEST</div>
<button class="cssText">cssText</button>
<button class="setAttribute">setAttribute</button>
<button class="stylesheet ">stylesheet </button>
CSS代码
.test{
font-size: 30px;
color: blue;
background-color: blueviolet
}
JS代码
var testNode = ElementsByClassName("test")[0];
var cssTextBtn = ElementsByClassName("cssText")[0];
var attributeBtn = ElementsByClassName("setAttribute")[0];
var stylesheetBtn = ElementsByClassName("stylesheet")[0];
// 1. 修改style样式:
stylesheetBtn.addEventListener('click',function(e){
var stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].style.backgroundColor ="green";
},false);
// 2. 修改特定元素节点的style内容
cssTextBtn.addEventListener('click',function(e){cssclass属性
testNode.style.cssText ="width: 300px; background-color: red; height: 200px;"
testNode.style.border ="1px solid black"
},true);
// 3. 通过setAttribute 修改style属性值
attributeBtn.addEventListener('click',function(e){
testNode.setAttribute('style','width: 400px; background-color: yellow; height: 300px;')
},false)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。