小编给大家分享一下js怎么使用setAttribute修改css样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
在JavaScript中,可以利用setAttribute()方法来通过类修改css样式。
说明
1、setAttribute()方法添加指定的属性,并为其赋指定的值。
2、如果这个指定的属性已存在,则仅设置/更改值。
语法
element.setAttribute(attributename,attributevalue)
参数
attributename String 必需。您希望添加的属性的名称。
attributevalue String 必需。您希望添加的属性值。
实例
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怎么使用setAttribute修改css样式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://www.py.cn/web/js/31787.html