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樣式”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！