• 技术文章 >Web开发 >JavaScript

    js使用setAttribute修改css样式

    小妮浅浅小妮浅浅2021-07-22 16:32:56转载117

    在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中文网,如有侵犯联系作者修改。

    专题推荐:js setattribute
    品易云
    上一篇:javascript关闭后的影响 下一篇:javascript字符串转换成utf-8编码

    相关文章推荐

    • js中co模块是什么• nodejs爬虫中的动态ip设置• js柯里化函数的好处• js中repeat()的使用• js中如何填充字符串• js中matchAll()方法的使用• js中replaceAll方法的实现• js中this的六种模式• js中for...in语句的使用注意• java之jsp内置对象有哪些• js中有哪些书写位置• js使用语法的注意事项• js中Array.filter()方法如何使用• js和css有什么区别• Node.js 16.5.0正式发布,版本更新速看

    全部评论我要评论

  • 取消发布评论
  • 

    Python学习网