【转】js中设置元素class的三种方法小结

最新推荐文章于 2023-07-13 10:55:30 发布
最新推荐文章于 2023-07-13 10:55:30 发布
阅读量276 收藏
点赞数
分类专栏： JS DOM 文章标签： javascript
一、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="d1">test div</div> 
<script> 
var div = document.getElementById('d1'); 
div.setAttribute("class", "abc"); 
</script> 
</BODY> 
</HTML> 

IE6/7 : div背景色不是红色 
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色为红色 
结果：IE6/7不支持setAttribute('class',xxx)方式设置元素的class。 
二、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="d1">test div</div> 
<script> 
var div = document.getElementById('d1'); 
div.setAttribute("className", "abc"); 
</script> 
</BODY> 
</HTML> 

IE6/7 : div背景色为红色 
IE8/9/10/Firefox/Safari/Chrome/Opera : div背景色不是红色 
结果：IE8/9/10/Firefox/Safari/Chrome/Opera不支持setAttribute('className',xxx)方式设置元素的class。 
很有趣，使用setAttribute的时候第一个参数为class和className的情形在IE6/7和IE8/9/10/Firefox/Safari/Chrome/Opera刚好相反。 
三、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="d1">test div</div> 
<script> 
var div = document.getElementById('d1'); 
div.className = 'abc'; 
</script> 
</BODY> 
</HTML> 
qfgg3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js中设置元素class的三种方法小结
10-28
列举所有的方式，看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。
设置元素class的三种方式
weixin_34419321的博客
08-26 141
列举所有的方式，看看各浏览器的支持差异。 一、el.setAttribute('class','abc'); &lt;!DOCTYPE HTML&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;setAttribute('class', 'abc')&lt;/title&amp
js 设置class
周尚冬的专栏
04-27 6118
今天遇见了需要动态给一个Div设置样式.然后发现 居然使用document.getElementById("divID").class="mydivclass";居然不行于是没有办法啦,就上网看了一下.原来需要指定的是classsname而不是class于是:document.getElementById("divID").className="mydivclass";就成
设置元素class
yimawujiang的博客
04-18 253
var ElementItem = (function () { function ElementItem(el) { this.el = el; } //设置class名 ElementItem.prototype.addClass = function (className) { var classList = this.el....
jquery中获取元素的几种方式小结
10-28
在JavaScript中，索引是从0开始的，所以`.eq(2)`将选取第三个元素。例如，在给出的HTML示例中，`$("p").eq(2)`和`$("p").eq(3)`将分别选取第三和第四段落并将其颜色设置为红色。 2. **获取指定条件一致的元素**： ...
用JS动态设置CSS样式常见方法小结(推荐)
10-21
本文将详细讲解如何使用JS来动态设置CSS样式，包括以下几种常见方法： 1. **直接设置`style`对象的属性** 这是最直接的方法，可以直接通过元素的`style`对象来设置样式。例如： ```javascript element.style....
vue-router之nuxt动态路由设置的两种方法小结
10-17
本文将详细介绍如何在Nuxt.js中设置动态路由的两种方法。 ### 方法一：通过`<nuxt-link>`组件 在Vue.js和Nuxt.js中，我们通常使用`<nuxt-link>`组件来创建可点击的链接，它相当于Vue Router中的`<router-link>`。...
JS 之 Class
m0_48237530的博客
03-27 261
定义类有两种主要方式：类声明和类表达式// 类声明// 类表达式类的定义不能提升（也可以这样理解：类提升了，但是在定义之前存放在暂存性死区中，不能使用）函数 VS 类类表达式中的名称是可选的。这个名称只能在类表达式作用域中使用。// 空类// 有构造函数// 有设置函数或获取函数get a() {return "a"// 有静态方法。
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
10-27
本篇文章是对JS中的getAttribute和setAttribute(取得和设置属性)的使用进行了详细的分析介绍，需要的朋友可以参考下
js中设置元素class的方法
树洞树洞-单纯记录
02-23 1106
1. var div = document.getElementById('d1'); div.setAttribute("class", "abc"); 2. var div = document.getElementById('d1'); div.setAttribute("className", "abc"); 3. var div = document.getElementByI
通过JavaScript设置类class
二木成林
10-18 809
效果展示 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> .redBackground{ background-color: red; } </style> </h...
JS脚本 - 批量给所有指定标签追加Class属性
最新发布
Zong_0915的博客
07-13 1582
公司里我们有个应用引入了UBT埋点，记录了页面上所有的点击操作以及对应的点击按钮。但是我们看下来发现，我们需要给每个按钮加一个唯一标识做区分，并且这个ID是给UBT埋点专用的。那怎么办呢？加Id： 不合理，因为如果某个标签已经自带Id了，我们不太可能去覆盖它。加Class：合理，class属性可以加多个，也可以过滤。
11 设置元素class
weixin_40719943的博客
08-16 102
通过对象的方式设置样式：isTrue为true的时候div才会添加active类 换种写法： 以数组的方式添加样式： 字符串方式为元素添加class：
js中class类的基本使用
yy869949908的博客
12-15 4683
class类的基本使用
原生js删除增加修改class属性className
細水、長流√的专栏
05-19 5016
其实html5已经扩展了class操作的相关API，其中classList属性就以及实现了class的增删和判断。 HTML DOMclassList属性 classList属性的方法有： add(value) 添加类名，如果有则不添加 contains(value) 判断是否存在类名，返回Boolean值 remove(value) 从列表中删除类名 toggle(value) 切换类名：如果列表中存在则删除，否则添加 根据红宝书的介绍，目前支持classList属性的浏览器有Fi..
JS修改class的方法
weixin_33739646的博客
12-21 4960
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript 改变标签的css 的class属性
热门推荐
好吗好的~的技术博客
12-25 1万+
今天做设计模式作业的时候要用到js，为了好看一些，打算通过js来改变HTML标签的class属性  直接通过dom语法来修改HTML的css属性 document.getElementById("btn1").setAttribute("class","btn btn-primary"); document.getElementById("btn1").className = "btn...
js获取dom class子元素的方法
05-19
可以使用以下两种方法来获取DOM元素的子元素： 1. 使用`querySelectorAll()`方法： ```javascript const parent = document.querySelector('.parent-class'); const children = parent.querySelectorAll('.child-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值