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


当前名称:js怎么使用setAttribute修改css样式
URL网址:http://www.hxwzsj.com/article/jhgjjc.html

其他资讯

Copyright © 2025 青羊区翔捷宏鑫字牌设计制作工作室(个体工商户) All Rights Reserved 蜀ICP备2025123194号-14
友情链接: 做网站设计 成都网站建设 手机网站制作 成都响应式网站建设 成都网站设计公司 企业网站设计 成都网站设计 企业网站设计 营销型网站建设 网站设计 网站制作 定制网站设计 企业手机网站建设 成都网站建设 定制网站设计 网站设计 营销型网站建设 网站建设开发 成都网站制作 成都定制网站建设 重庆网站设计 营销型网站建设