设置元素class的三种方式

最新推荐文章于 2024-05-06 18:17:39 发布
最新推荐文章于 2024-05-06 18:17:39 发布
阅读量144 收藏
点赞数

列举所有的方式，看看各浏览器的支持差异。

一、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>

所有浏览器都支持。

weixin_34419321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中设置元素class的三种方法小结
10-28
列举所有的方式，看看各浏览器的支持差异。方便用js动态设置元素css的代码。需要的朋友可以参考下。
JS如何设置元素样式的方法示例
10-19
在本文中，我们将详细探讨三种通过JavaScript设置HTML元素样式的常见方法，并分析它们的特点和适用场景。 1. **通过元素的`style`属性设置样式** 这是最基本和直接的方法，通过`element.style.property = value`的...
js 设置class
周尚冬的专栏
04-27 6118
今天遇见了需要动态给一个Div设置样式.然后发现 居然使用document.getElementById("divID").class="mydivclass";居然不行于是没有办法啦,就上网看了一下.原来需要指定的是classsname而不是class于是:document.getElementById("divID").className="mydivclass";就成
设置元素class
yimawujiang的博客
04-18 254
var ElementItem = (function () { function ElementItem(el) { this.el = el; } //设置class名 ElementItem.prototype.addClass = function (className) { var classList = this.el....
JS 之 Class
m0_48237530的博客
03-27 266
定义类有两种主要方式：类声明和类表达式// 类声明// 类表达式类的定义不能提升（也可以这样理解：类提升了，但是在定义之前存放在暂存性死区中，不能使用）函数 VS 类类表达式中的名称是可选的。这个名称只能在类表达式作用域中使用。// 空类// 有构造函数// 有设置函数或获取函数get a() {return "a"// 有静态方法。
js获取class的所有元素
12-11
在JavaScript中，获取具有特定class的所有元素是一项常见的任务，这对于网页动态交互和DOM操作至关重要。在给定的代码示例中，我们看到一个名为`getClass`的自定义函数，它用于根据标签名称和类名获取元素。这个功能...
javascript通过class来获取元素实现代码
10-27
javascript获取元素有很多的方法，本文简单的介绍下通过class获取元素的实现代码，感兴趣的朋友可以参考下，希望本文知识点可以帮助到你
js中设置元素class的方法
树洞树洞-单纯记录
02-23 1111
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 getAttribute和setAttribute(取得和设置属性)的使用介绍
10-27
本篇文章是对JS中的getAttribute和setAttribute(取得和设置属性)的使用进行了详细的分析介绍，需要的朋友可以参考下
JS脚本 - 批量给所有指定标签追加Class属性
Zong_0915的博客
07-13 1676
公司里我们有个应用引入了UBT埋点，记录了页面上所有的点击操作以及对应的点击按钮。但是我们看下来发现，我们需要给每个按钮加一个唯一标识做区分，并且这个ID是给UBT埋点专用的。那怎么办呢？加Id： 不合理，因为如果某个标签已经自带Id了，我们不太可能去覆盖它。加Class：合理，class属性可以加多个，也可以过滤。
11 设置元素class
weixin_40719943的博客
08-16 102
通过对象的方式设置样式：isTrue为true的时候div才会添加active类 换种写法： 以数组的方式添加样式： 字符串方式为元素添加class：
学习使用js创建class样式的方法代码整理
最新发布
徊忆羽菲
05-06 541
以上三种方法都可以在JavaScript中创建class样式，你可以根据实际需求选择合适的方法。
js中class类的基本使用
yy869949908的博客
12-15 4781
class类的基本使用
原生js删除增加修改class属性className
細水、長流√的专栏
05-19 5035
其实html5已经扩展了class操作的相关API，其中classList属性就以及实现了class的增删和判断。 HTML DOMclassList属性 classList属性的方法有： add(value) 添加类名，如果有则不添加 contains(value) 判断是否存在类名，返回Boolean值 remove(value) 从列表中删除类名 toggle(value) 切换类名：如果列表中存在则删除，否则添加 根据红宝书的介绍，目前支持classList属性的浏览器有Fi..
js 关于动态添加class样式的学习
热门推荐
任重道远
05-04 2万+
 如果，我这里有一个需求。如下的页面代码&lt;body&gt; &lt;input type="button" value="红" id="btn1"/&gt; &lt;p id="p1"&gt; 2016年圣诞前的一个星期天下午，我推开窗，加州明媚的阳光洒在街道上，四季如春的旧金山和风拂面。对面屋外草地上金发碧眼的孩子们正兴奋的跑着跳着，看着家长给圣诞树装扮上满满的礼物 。眺望
js动态修改class属性
jcyuanshihcwangqiu的博客
06-18 9796
js动态修改class属性 在前端界面，希望通过点击修改class属性，实现代码如下： $(function(){ $("#selected li").click(function() { $(this).siblings('li').removeClass('active'); // 删除其他li元素的样式 $(this).addClass('active'); // 添加当前元素的样式 }); });
vue通过class名设置元素高度
05-23
可以使用Vue的Class绑定语法来实现设置元素高度。具体步骤如下： 1. 在模板中定义元素，并为其设置class名： ``` <div class="my-element"> ``` 2. 在样式中设置该class名的样式，包括高度： ``` .my-...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值