这篇文章给大家分享的是有关如何使用js修改CSS属性的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。js修改css属性的方法:1、修改style样式,语法“样式表的指定内容.style.属性="值&quo
这篇文章给大家分享的是有关如何使用js修改CSS属性的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
js修改css属性的方法:1、修改style样式,语法“样式表的指定内容.style.属性="值"”;2、修改特定元素节点的style内容,语法“元素对象.style.cssText="样式值"”;3、使用setAttribute()函数。
修改style样式
通过document.styleSheets[n] // n表示期望修改的样式表序号,从0开始计数来获取到期望修改的样式表,通过cssRules[0]获取到该样式表的css内容,通过style修改特定样式。(此方法比较麻烦,需要清楚指定样式在样式表的顺序)
修改特定元素节点的style内容
cssText可以一次性修改多个css属性
style.attrName 修改单个属性 attrName的值
通过setAttribute 修改style属性值
<div class="test" style="height: 100px;">TEST</div><button class="cssText">cssText</button><button class="setAttribute">setAttribute</button><button class="stylesheet ">stylesheet </button>
.test { font-size: 30px; color: blue; background-color: blueviolet}
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)
感谢各位的阅读!关于“如何使用js修改css属性”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!
--结束END--
本文标题: 如何使用js修改css属性
本文链接: https://www.lsjlt.com/news/271244.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0