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)
上一篇 2021年11月3日 下午8:00
下一篇 2021年11月3日 下午9:00


相关推荐

  • 开源商城系统带app源码_萌果APP源码

    开源商城系统带app源码_萌果APP源码直接下载导入工程即可直接运行.包含服务器源码(服务器已经在线配置)主要功能如下:首页:从上到下分别是:广告轮播、菜单按钮、品牌推介、推介、热销商品分类:类似京东商品三级分类,左边是一级分类,右边是二级分类,二级分类下面包含三级子分类商城功能:商品详情、购物车、确认订单、支付功能商品详情:商品大图轮播、商品规格(选择不同规格显示不同价格,

    2022年4月19日
    89
  • PyYAML中文文档「建议收藏」

    PyYAML中文文档「建议收藏」PyYAML文档PyYAML现在维护在https://github.com/yaml/pyyaml。此页面仅用于历史目的。英文文档链接:http://pyyaml.org/wiki/PyYAMLDocumentation安装下载源码包PyYAML-3.12.tar.gz并解压缩。转到目录PyYAML-3.12并运行$pythonsetup….

    2022年8月30日
    6
  • jboss安装与配置_JbusDriver

    jboss安装与配置_JbusDriver1,下载jboss6.0产品jboss官网下载地址:http://www.jboss.org/jbossas/downloads/这里下载了jboss-as-distribution-6.0.0.Final.zip下载完成后,将其解压缩后即可完成安装,解压缩后将其放置到一个不带空格的目录(避免不必要的麻烦),同时在“环境变量设置”中设置名为JBOSS_HOME的环境变量,值为J…

    2026年4月17日
    6
  • 经济基础知识(中级)【2】

    经济基础知识(中级)【2】1.下列经济活动中,会导致企业现金流入的有()。A.购买原材料B.用固定资产对外投资C.对外投资D.收到银行贷款E.销售商品2.下列义务中,属于公司股东法定义务的有()。A.遵守公司章程B.缴纳所认缴的出资C.忠实义务D.勤勉义务E.公司设立登记后,不得抽回出资3.会计确认应该符合一定的标准,企业在确认收入时应当坚持的标准有()。A.及时确认B.取得收入权利的交易已经发生C.按照权责发生制要求进行确认D.取得资产所有权的交易已经发生E.年底统一确认4.下列统计

    2022年5月8日
    62
  • offsetWidth,clientWidth的区别

    offsetWidth,clientWidth的区别offsetWidth offsetHeight ,offsetLeft offsetTopscrollWidth scrollHeight ,scrollLeft scrollTopclientWidth clientHeight 对象的实际宽度和高度      offsetWidth,offsetHeight  offsetWidth=width+padd

    2022年7月22日
    13
  • Springboot引入本地jar包,并通过maven把项目成功打包成jar包部署[通俗易懂]

    Springboot引入本地jar包,并通过maven把项目成功打包成jar包部署[通俗易懂]引入钉钉的sdk打包到线上,各种报错:ClassNofFoundException…第一步:将jar包放到resource的lib文件夹下:第二部:在pom文件中引入:第三部:继续修改pom文件的打包插件配置:<includeSystemScope>true</includeSystemScope>打包时候IDEA还是会报警告,不用管它;…

    2022年6月29日
    26

发表回复

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

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