js修改css属性的方法:1、修改style样式,语法“样式表的指定内容.style.属性=值”;2、修改特定元素节点的style内容,语法“元素对象.style.csstext=样式值”;3、使用setattribute()函数。
本教程操作环境:windows7系统、javascript1.8.5版、dell g3电脑。
原生js修改css属性有以下三种方法修改style样式
通过document.stylesheets[n] // n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssrules[0]获取到该样式表的css内容,通过style修改特定样式。(此方法比较麻烦,需要清楚指定样式在样式表的顺序)
修改特定元素节点的style内容
csstext可以一次性修改多个css属性
style.attrname 修改单个属性 attrname的值
通过setattribute 修改style属性值
html代码<div class="test" style="height: 100px;">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 = document.getelementsbyclassname("test")[0]; var csstextbtn = document.getelementsbyclassname("csstext")[0]; var attributebtn = document.getelementsbyclassname("setattribute")[0]; var stylesheetbtn = document.getelementsbyclassname("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) { 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)
【推荐学习:javascript高级教程】
以上就是js怎么修改css属性的详细内容。