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

最新推荐文章于 2021-08-12 16:43:23 发布
最新推荐文章于 2021-08-12 16:43:23 发布
阅读量188 收藏
点赞数

一、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_34032792
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IE 10前的版本兼容 classList
KevinMiGuan的博客
03-05 577
if (!("classList" in document.documentElement)) { Object.defineProperty(HTMLElement.prototype, 'classList', { get: function() { var self = this; fu...
封装class，让className可以在IE8及其以下版本的浏览器中使用
XinYe666666的博客
06-26 406
思路：在IE8及其以下版本的浏览器中className会变为一个字符串，用split将其变为数组，用逗号隔开你所需要的class名，再建一个新数组，判断原来那个数组里面的元素有没有你需要的类名，如果有，就添加到  新数组里，最后返回新数组&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="U...
关于jQuery $(selector).addClass(class) IE8 兼容的说法
沈荣荣的博客
02-29 6322
我想浏览器兼容，是很多前台人的烦恼吧，随着时间的推移，技术在不断的进步， 这就意味我们曾经有过或多或少的问题，而我们并不能抛弃，因为我们的产品在更新，并不意味着之前的产品大家不用，我们任然不可避免的去面对这些问题，解决这些问题： 今天想跟大家分享是的“关于jQuery $(selector).addClass(class) IE8 兼容的说法”： 我想大家应该非常喜欢使用jQuery 的$(s
javascript --- > 使用语法糖class定义函数
栗子好好吃的博客
05-02 672
本文讨论的是通过class声明的函数,有什么特点,或者说是指向了哪里. class A() {} // A是一个类 // 要看class声明的函数指向哪里,只需将其[[Prototype]]属性打印到控制台,下面看看A和它的原型对象的指向 // 注:[[Prototype]]属性通过__proto__访问 console.log(A.__proto__); console.log(A.p...
ie 动态添加css样式,IE7/8动态添加css属性'top'作为内联样式
weixin_42588555的博客
08-04 312
我正在编写其他人放在一起的代码。这个想法是，在一个页面上，你在页面上有多个表格。首先，他们只是一个图像，但当你点击图像，你可以查看整个表格。这些表格包裹在一个div覆盖层中，根据您在页面上的位置来控制表格的位置。IE7/8动态添加css属性'top'作为内联样式该脚本基本上可以找到您在页面上的位置，然后将“顶部”属性添加为内联样式，并且像素将取决于您点击哪张表以及页面上的位置。它在所有的浏览器，但...
jQuery之过滤元素操作小结
12-12
1：eq(index)方法 用于获取第N个元素，这个元素的位置从0开始算起，语法格式如下：eq(index) 获取第3个表格，并将它的背景色设置为”#FCF”， 代码如下：$(“td”).eq(2).... //选取带有class属性值为sel的input元素，
JavaScript基础和实例代码
03-20
JavaScript电子书，包括了JavaScript的大部分知识，可以帮助读者快速入门。内容如下： 第1章 JavaScript语言概述 1.1 JavaScript是什么 1.1.1 JavaScript简史 1.1.2 JavaScript有何特点 ...8.4 本章小结
Ext Js权威指南(.zip.001
09-26
1.2.4　在javascript中使用json / 4 1.2.5　在.net中使用json / 8 1.2.6　在java中使用json / 12 1.2.7　更多有关json的信息 / 15 1.3　ext js 4概述 / 15 1.4　ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...
【JavaScript】解决IE8下，用js不能选择class的情况
weixin_39415598的博客
03-24 663
cf9b35bc2fb4f9131e613a6c69d5535b.jpg HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解决IE8不支持js选择class问题&l...
es6规范的class使用方法
不想内卷的博客
08-12 325
对于科班出身的程序员来说，class是啥玩意就不必哆嗦了，直接讲吧 在之前规范的写法是这样子的 //es5的常规用法 //手机 function phone(brand,price){ this.brand=brand; this.price=price; } //添加方法 //prototype是函数对象上面预设的对象属性 phone.prototype.call=function(){ console.lo
部分ie8不兼容的css问题
luckyJieXu的博客
01-30 727
1、解决在ie8中input框的输入顶格显示问题   一般写input框我们为了好看会给行高，但是ie8中input框的输入就会顶格显示，为了解决这个问题网上都给出使用行高line-height，但是我使用这个还是没有解决。最后我去除height与line-height，使用padding-top与padding-bottom代替就可以了。 2、解决在ie8中background-size
IE中，给一个HTML元素同时指定多个class时，样式是怎么确定的
rainbow702的博客
01-14 4084
.wrappertop2{color:blue;} .wrappertop{color: red;} .wrappertop3{color:red;} .wrappertop4{color: blue;} 新增消息 消息名 消息名 消息名 消息名  结果如下
IE兼容性问题（封装Class）
weixin_33775582的博客
01-19 569
<script type="text/javascript"> window.onload = function(){ //封装Class function getClass(cla,id){ if(document.getElementsByClassName){ if(id){ return docume...
IE11兼容ES6语法问题
qq506930427的博客
08-20 2万+
一、使浏览器兼容ES6基本语法 例如：1.新的变量声明方式 let/const 2.箭头函数 3.模板字符串 4.函数默认参数 5.展开运算符等基础语法 方法 在引入其他脚本前先引入browser.min.js。（脚本下载地址：开发版本browser.js；生产版本browser.min.js。） script标签的type的值设为text/babel。 <!DOCTYPE htm...
一行代码轻松搞定各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
热门推荐
小诺
11-26 7万+
在网站开发中不免因为各种兼容问题苦恼，针对兼容问题，其实IE给出了解决方案Google也给出了解决方案百度也应用了这种方案去解决IE的兼容问题？ 百度源代码如下： 1 2 html xmlns=http://www.w3.org/1999/xhtml xmlns:bd=http://www.baidu.com/2010/xbdml> 3 head> 4 m
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、付费专栏及课程。

余额充值