js怎么使用setAttribute修改css样式

小编给大家分享一下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样式"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！