IE中className兼容问题，不支持attribute对应的系列方法操作

最新推荐文章于 2021-09-13 11:07:08 发布

原创最新推荐文章于 2021-09-13 11:07:08 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #class #firefox #function #测试 #c

本文探讨了在Internet Explorer浏览器中使用JavaScript操作DOM元素时，遇到的关于class属性设置和获取的问题。指出在IE中使用setAttribute方法修改class属性无法生效，并提供了解决方案：直接通过element.className进行赋值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：使用getElementById()取得一个element后，使用setAttribute()设置class在IE中没有反应，alert(getAttribute("class"))得到的结果是null? FireFox中没有问题。
解决：不使用setAttribute而是直接赋值className就可以设置class的属性了，removeAttribute("class")也没有作用，使用 className=""代替。当然，getAttribute也不行，要取值直接用className就得到了。
Note:如果不是class，而是id, name, src等属性，目前没有这里的兼容性问题
测试代码：

a color:red

b font-weight:bold font-size:20px

a+b color:red font-weight:bold font-size:20px

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

phinix_c

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

44、JavaScript 文档操作与属性处理全解析

i3j4k5的博客

05-20

本文深入解析了JavaScript中对文档结构的操作与属性处理，涵盖了从旧版浏览器的选择器到现代HTML5的特性，包括元素选择、节点遍历、自定义扩展方法、属性读写、数据集属性以及内容操作等核心知识。同时，还介绍了性能优化技巧和安全性注意事项，为高效前端开发提供了全面指导。

JS常用知识点

向宇

06-18

373

【代码】JS常用知识点。

1 条评论您还未登录，请先登录后发表或查看评论

js实现简单的className不兼容问题

07-28

使用封装的思想，简单的实现IE浏览器在javascript中对getElementsByClassName的不兼容问题，实现的方法简单，通俗易懂

className兼容性

lh95lbw的博客

06-26

391

<body> <ul id="ul"> <li class="a abc abcd abcde ">1</li> <li class="c a">2</li> <li class="aa">3&lt

js的setAttribute中class和className浏览器兼容问题

miaoshaohoa的专栏

01-20

6523

前几天工作中遇到一个js问题，本来js就不大会，倒腾了好长时间，并在做弹窗的时候用到了setAttribute，出现了不兼容的问题，在网上查了好多，真是郁闷，看来啥都得学啊。主要的工作是做一个根据时间段变化图片的背景色，并在每一个时间段开始的同时同步进行倒计时，唉，两个分开来做都很好做，但是整合到一起的时候就麻烦了，倒计时的时候不会进行刷新......先说这个弹窗问题，在不是上述时间段

条件注释+JS实现各版本IE浏览器className

weixin_30475039的博客

05-13

295

最近又开始忙了，项目中又遇到了可恶的IE Hack问题，各种Hack的看着让自己都觉得恶心，于是决定改造一番。首先请出条件注释语句：之前用过的条件注释  <!--[if IE 7]><body class="ie7"><![...

js（getElementsByClassName）兼容ie低版本浏览器解决方法

iteye_983的博客

06-10

378

在ie浏览器中，尤其是低版本ie浏览器，并不支持document.getElementsByClassName，今天解决一下这个问题，利用document.getElementsByTagName方法来解决。有时候，页面元素的类名或id通常不止一个，如"aaa bbb ccc"这样要选取其中的aaa的话，我们通常分为三种情况："aaa "与 "空格+aaa"与"aaa+空格...

transitionend、change、classList、兼容代码、元素样式属性的操作、-Attribute自定义属性、阻止跳转、元素绑定相同事件、元素解绑事件、事件冒泡、事件三阶段

专研前端，探索后端

04-26

534

transitionend过渡监听事件：过渡监听事件transitionend指的是CSS3中过渡效果执行一次后触发事件处理函数，如下案例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div {

整理大厂高频核心前端面试题，五万多字，面试必考

猫老板的豆

09-13

2950

如果 Vue 组件中的 data 是个对象，那么所有复用这个组件的地方，都在使用这个组件里面唯一的一个 data，所有使用组件的地方的 data 都会指向栈内这一个 data 的地址，那么会造成。等待执行栈和微任务队列都执行完毕才会执行，并且在执行完每一个宏任务之后，会去看看微任务队列有没有新添加的任务，如果有，会先将微任务队列中的任务清空，才会继续执行下一个宏任务。异步：是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。

切图仔最后的倔强：包教不包会设计模式 - 结构型.md

前端劝退师

08-06

529

1. 什么是结构型模式结构型模式主要用于处理类和对象的组合，对应思维导图： 2. 外观模式: Facade Pattern 对接口二次封装隐藏其复杂性，并简化其使用。外观模式包含如下角色： Facade: 外观角色 SubSystem: 子系统角色使用时机当我们将系统分成多个子系统时，我们会降低代码复杂性。编程时的最佳实践是最小化子系统之间的通信和依赖关系。实现这一目标的一个好方法...

jstl标签里面使用EL表达式时提示不支持的问题，attribute items does not accept any expressions错误

yangyanglovejunxi的专栏

10-22

661

今天在搞jstl的时候，发觉jstl的标签都不起作用，检查了很久，程序没有错，最后发现是标签问题，将原先的更改为即可

JS兼容IE9以下的获取多个className的函数

zpr5554321的博客

02-01

478

开心，可以写前端博客了，有误的话希望大家给我指导。 //为了兼容低版本的浏览器,该方法适用于有多个类名 function getElementsByClassName(node,classnames){ if(node.getElementsByClassName){ //使用现有方法 return node.getElementsByClassName(classnames); }e...

关于IE与FF下class与className的区别

ddige1793的博客

02-28

244

http://www.okajax.com/a/200807/0F5N152008.html 今天在做表格效果发现以前的表格交替前景和突出显示在IE7和FF最新版中竟然有点问题，关键就在于这个class和className上:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www....

浏览器已经支持 className 的一些方法了

zhangxin09的专栏

12-18

2861

element.classList with methods add(), remove(), toggle(), contains(). 这是标准的方法。问题是许多旧的浏览器不支持。

js中IE8及以下浏览器关于classname兼容性简单处理

weixin_42413684的博客

06-26

1238

简单效果图：谷歌浏览器： IE11浏览器：IE8：IE5：代码如下： <body> <ul id="ul"> <li class="a abc abcd abcde ">1</li> <li class="c a">2</li> <li

IE浏览器对getElementByClassName()方法支持较差，解决方法(粗略)：

吃瓜群众的博客

09-24

2204

1.var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop; 因为兼容性问题，要用如上的方法。使用原生方法，要注意兼容性 2.IE浏览器对getElementByClassName()方法支持较差，解决方法(粗略)：在外面重新写一个方法 function

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

weixin_34032792的博客

07-15

241

一、el.setAttribute('class','abc'); 复制代码代码如下: <!DOCTYPE HTML> <HTML> <HEAD> <meta charset="utf-8" /> <title>setAttribute('class', 'abc')</title> <style t

封装class，让className可以在IE8及其以下版本的浏览器中使用

XinYe666666的博客

06-26

464

思路：在IE8及其以下版本的浏览器中className会变为一个字符串，用split将其变为数组，用逗号隔开你所需要的class名，再建一个新数组，判断原来那个数组里面的元素有没有你需要的类名，如果有，就添加到新数组里，最后返回新数组<!DOCTYPE html> <html lang="en"> <head> <meta charset="U...

解决IE8一下不支持getElementsByClassName的方法

99guo的专栏

12-03

8915

function getElementsByClassName(className, root, tagName) { //root：父节点，tagName：该节点的标签名。这两个参数均可有可无 if (root) { root = typeof root == "string" ? document.getElementById(root) : root;