js 给某个div增加class 样式(三种方式)

js 给某个div增加class 样式(三种方式)

第一种:      el.setAttribute(‘class’,’abc’); 

  <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <meta charset="utf-8" />
    <title>setAttribute('class', 'abc')</title>
    <style type="text/css">
    .abc {
    background: red;
    }
    </style>
    </HEAD>
    <BODY>
    <div id="div">test div</div>
    <script>
    var div = document.getElementById('div');
    div.setAttribute("class", "abc");
    </script>
    </BODY>
    </HTML> 

第二种: el.setAttribute(‘className’, ‘abc’);

   

<!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <meta charset="utf-8" />
    <title>setAttribute('className', 'abc')</title>
    <style type="text/css">
    .abc {
    
    background: red;
    }
    </style>
    </HEAD>
    <BODY>
    <div id="div">test div</div>
    <script>
    var div = document.getElementById('div');
    div.setAttribute("className", "abc");
    </script>
    </BODY>
    </HTML>

第三种:el.className = ‘abc’;

  

 <!DOCTYPE HTML>
    <HTML>
    <HEAD>
    <meta charset="utf-8" />
    <title>el.className = 'abc'</title>
    <style type="text/css">
    .abc {
    background: red;
    }
    </style>
    </HEAD>
    <BODY>
    <div id="div">test div</div>
    <script>
    var div = document.getElementById('div');
    div.className = 'abc';
    </script>
    </BODY>
    </HTML>

建议使用第三种方法, 其他方法可能存在浏览器兼容问题。

原文:https://blog.csdn.net/yan791124465/article/details/71123664

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/112655.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Java方法重载_java入门方法的使用

    Java方法重载_java入门方法的使用在Java中,同一个类中的多个方法可以有相同的方法名称,但是有不同的参数列表,这就称为方法重载(methodoverloading)。参数列表又叫参数签名,包括参数的类型、参数的个数、参数的顺序,只要有一个不同就叫做参数列表不同。重载是面向对象的一个基本特性。publicclassDemo{ //一个普通得方法,不带参数,无返回值 publicvoidadd(){ //met…

    2025年6月25日
    0
  • Linux常用下载工具推荐「建议收藏」

    Linux常用下载工具推荐「建议收藏」[color="#02368d"]Linux常用下载工具推荐转自:http://doc.zoomquiet.org/data/20060730210451/index.html

    2022年7月1日
    65
  • matlab设计模拟带通滤波器

    matlab设计模拟带通滤波器简单记录下在matlab上如何设计出模拟的带通滤波器,包括:巴特沃斯滤波器、切比雪夫I型滤波器、切比雪夫II型滤波器、椭圆型滤波器。代码如下:%设计带通滤波器%巴特沃斯、切比雪夫I型、切比雪夫II型

    2022年7月2日
    22
  • max函数比较字符串类型

    max函数比较字符串类型

    2022年2月10日
    37
  • 如何查看jdk版本号_jdk与tomcat版本

    如何查看jdk版本号_jdk与tomcat版本背景:最近有一个springboot项目要发布到很老的一台服务器上,该台服务器是XP200232位系统,并且springboot微服务需要连接服务器上的accessdb,因此需要有对应的jdk,看了看网上的查看JDK版本很多都不靠谱(中文技术网站都是相互抄袭),特地总结了一下:方法1:最基本的,下载jdk的时候应该知道自己下的什么版本,在安装jdk的时候就在安装目录里写清楚版本号以便将…

    2022年9月23日
    0
  • random.nextInt()与Math.random()基础用法

    random.nextInt()与Math.random()基础用法1、来源java.util.Random类中的方法;Math类中的静态方法2、用法产生0-n的伪随机数(伪随机数参看最后注解)://两种生成对象方式:带种子和不带种子(两种方式的区别见注解)Randomrandom=newRandom();Integerres=random.nextInt(n);Integerres=(int)(Math.random()*n);3、

    2022年7月21日
    12

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号