品易云推流 关闭
文章详情页
文章 > JavaScript > js使用setAttribute修改css样式

js使用setAttribute修改css样式

js

头像

小妮浅浅

2021-07-22 16:32:56393浏览 · 0收藏 · 0评论

在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样式,希望对大家有所帮助。更多js学习指路:js教程

本文转载于php中文网,如有侵犯联系作者修改。

关注

关注公众号,随时随地在线学习

本教程部分素材来源于网络,版权问题联系站长!

底部广告图