玩转原生JS：如何轻松修改CSS属性？

最编程 2024-08-10 12:09:20

...

原生JS——修改css属性

修改style样式:
通过document.styleSheets[n] // n表示期望修改的样式表序号，从0开始计数来获取到期望修改的样式表，通过cssRules[0]获取到该样式表的css内容，通过style修改特定样式；
修改特定元素节点的style内容
cssText可以一次性修改多个css属性
style.attrName 修改单个属性 attrName的值
通过setAttribute 修改style属性值

<style>
        .test {
            font-size: 30px;
            color: blue;
            background-color: blueviolet
        }
    </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>
// 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，并添加回调功能

下一篇：使用原生JavaScript操作CSS样式的技巧

玩转原生JS：如何轻松修改CSS属性？

玩转原生JS：如何获取和设置CSS样式——行内样式篇

玩转原生JS：如何轻松修改CSS属性？

玩转原生JS：如何添加和修改CSS样式——第三部分：操作样式表

玩转原生JS！轻松修改网页元素样式的方法解析