< 返回技术文档列表

跨浏览器使用setAttribute和setAttributeNode设置class属性

发布时间:2022-11-15 22:10:16⊙投诉举报

之前看了简书的文章,今天心血来潮我也凑一下热闹,顺便当做自己的日记,本文主要是针对IE下的设置class问题进行总结,不喜欢低版本的IE小伙伴们可以略过!!!

相信大家对setAttribute这个API不陌生,而且无论是在工作中、练习代码中,只需涉及到DOM操作,就肯定会用这个API。可是呢,setAttribute支持现在大部分的主流浏览器,可是在IE中尽管可以设置属性名,但又会出现一个问题,至于什么问题,小伙伴们可以往下看一看。

为了照顾一下初学的JavaScript新手,我借鉴了MDN对API的形容(不对,是粘贴复制~~),让小伙伴们可以更好的理解本文所讲述的API。

特别说明:我只在IE和chrome谷歌浏览器进行了测试,由于电脑配置老,带不动。

对于火狐和欧朋浏览器我并没有装,不知道效果能否一致,有兴趣的小伙伴可以进行测试~~~


电脑炸了

1.主流设置属性的setAttribute

首先呢,大家先看一下MDN对setAttribute的解释:

设置指定元素上的一个属性值。假如属性已经存在,则升级该值; 否则将增加一个新的属性用指定的名称和值。

语法就是这样:

element.setAttribute(name, value);

name: 是表示属性名称的字符串;

value: 是属性的新值;

有人会说,setAttribute我们都熟习,还用你告诉么?笑话!对于这一点呢,只是对新手一个提醒,温故而知新么。本文有关的API小伙伴们可以去MDN去查阅。

好了,不开玩笑了,切入正题。

既然我们知道语法了,而且会使用,对主流浏览器都支持。

但是呢,在IE中利用setAttribute设置class属性有一个小小的问题。

来看一下非常简单的代码:


setAttribute测试代码

这是一段非常简单的封装代码,大家都会看的懂,我们来看一下测试效果:


IE8测试效果

我们可以看到setAttributeIE8设置class属性是显示正常的(IE8及以上也显示正常!!),但在IE8以下尽管可设置属性,但就不能应用style样式,来看一下效果:


IE8以下效果

咦?已经成功设置了class属性,但为什么不能应用样式呢?这就要说起IE的兼容性问题了。众所周知啊,我们写代码基本都要照顾IE这个搞事情的浏览器,而有的公司呢也非常奇葩,也要兼容IE7what?这个就很致命了,一听这个相信大家头都会大的。确实,要想照顾这个搞事情的IE浏览器,我们不得不查阅很多资料,但是也不能完全的照顾这个低版本的IE

有的小伙伴说了,Jquery在手,天下我有!是的,用Jquery的人来说呢,对于这个兼容性不需要担心,Jquery内部都已经处理好这个跨浏览器的差异。

但是用久了Jquery的小伙伴来说,很多的JavaScript的特性根本不理解,不知道Jquery内部是怎么实现的,这对于学习JavaScript小伙伴来说不是很好的习惯,我还是建议用原生的JavaScript进行写代码,写久了好处多多,时间长了,相信小伙伴们也会创作出优秀的库~~~

说的有点跑偏了,总之对于IE和主流浏览器之间的不同也是很多,比方最常见的内存泄露、删除DOM元素后,DOM元素还会存在于文档中,还有个专属名词,叫什么超空间!!以及DOM事件等等一系列的头疼的问题。

要想处理上面的代码,兼容IE7的话,就需要改成下面的代码:


修复IE8以下无法应用样式

哎?等等,不是和上面的代码差不多么?没错,和上面的代码差不多,唯一的区别就是要把样式名字设置为" className "这个属性,至于为什么要设置这个东西,还有待研究,有大神知道的可以指出,下面来看一下修改代码后的效果:


IE8以下效果正常

可以看到,这回基本没有什么问题了,已经成功应用class样式,以上只是测试设置class属性!!

小伙伴们可以发现setAttribute本身是可以如预期那样是可以正确的设置class属性名,但却在低版本的IE下是不能正确应用样式的,这个要注意一下!!

但是对于低版本的IE浏览器要写className,高版本的IE浏览器className是不识别的,必需要用class,哎,如此写两遍,感觉非常麻烦。那,还有有没有别的方法呢?

当然还有别的办法,有人会说用HTMLElement类型进行设置,比方" div.id = value ",但又很局限,就那几个可以设置/获取的属性。

还有粗暴的方法" div.className = value ",当然这个也可以设置。

2.神器setAttributeNode

终于到了我们期待已久的主角" setAttributeNode ",这个API可相当厉害了,只不过我们不常使用。

小伙伴们不知道知不知道这个API呢?它可是一件凶(胸)器~~~,嘻嘻,你懂得。

咳咳,好了,不开玩笑了,来看一下MDN对setAttributeNode解释:

setAttributeNode():为指定的 Element 增加属性节点.

短短的一句话,对不熟习这个API的情况下,是一脸懵圈。我们来看一下语法:

var replacedAttr = element.setAttributeNode(attribute);

attribute:是增加到 element 中的属性节点.

replacedAttr:是被替换掉的属性节点。 假如存在原有属性, 则函数返回原有属性节点.

究竟是什么意思呢?简单地说就是setAttributeNode这个API接收一个参数,也就是你要设置的属性,如本文中测试的class属性,你可以把class传入到这个API里。返回值就不说了,比较详细。

那么问题来了,怎样用这个setAttribute呢?很简单,它需要和createAttribute配合使用的,由于createAttribute是创立属性的,再来看一下createAttribute的解释:

createAttribute 方法创立并返回一个新的属性节点.

语法呢,就是这样:

var attribute = document.createAttribute(name);

attribute:是一个属性节点.

name:是属性节点的属性名.

其中name是你要设置的属性名字,比方class。而attributecreateAttribute返回后的属性名。换句话说就是createAttribute()函数return了一个你设置的属性名~~~

好了,理解了这两个API后,我们要在IE浏览器下测试一下能否能处理在IE8以下不用className设置class属性名并且又能成功的应用style样式呢?

废话不多说,上代码:

setAttributeNode测试

这个函数也一样非常的简单,首先我获取了iddiv的元素,而后利用createAttribute这个API创立了class属性名,而后在设置属性值name.nodeValue = value这句代码。注意一下,这里的nodeValue也可以替换成value,就像这样name.value = value,效果是一样的,根据你的喜欢!

而后呢,我们看一下效果是怎么的,能否能预期的按照我们的想法实现呢?

利用setAttributeNode和createAttribute实现效果

小伙伴们可以看到在IE7下,效果是正常的,成功的设置了class属性,并且也已经正确的设置了style样式。不止在IE7,在IE8、IE9、IE10、IE11甚至在IE5下也是正确显示的,小伙伴们假如不相信的话可以动手试试哦~~

好了,以上就是在IE下设置class属性的方法了,下面我贴一下可以跨浏览器设置属性的代码,目测现在没什么问题,假如小伙伴在试代码的过程中出现问题了,希望指出!


这段封装的代码使用TypeScript这个超集写的,假如不熟习TypeScript语法的小伙伴可以去官方文档是学习一下,强类型的JavaScript

3.代码详解

这个函数接收三个参数,元素名字,要设置的属性名,对应属性名的值

首先是判断是IE还是别的浏览器,比方谷歌啊,火狐啊,欧朋这些主流的浏览器。这里注意一下,我使用getAttributenavigator对象来判断是IE的版本的,由于getAttribute在IE8以下(注意不包括IE8)取到的值是nullIE8及以上是正常输出值的。

假如是IE8以下就用setAttributeNode()createAttribute()这两个API进行设置属性,假如是主流浏览器的话,就用标准中的setAttribute()设置属性。这样的话,在IE中和在其余主流浏览器中都是可以正常运行的。

最后return true 是告诉外界设置成功,我并没有排除出现错误的情况下,所以小伙伴们可以将代码改造一下,用try...catch,以免出错~~~

至于为什么我只判断版本号小于8,由于在IE9+基本都和其余主流浏览器基本一致,IE9+是处于标准模式的,所以区别还是很小的,主要是对于低版本的IE浏览器。

代码非常简单,对于不熟习TypeScript的小伙伴去看一下官方文档,会基础就能看懂代码啦!!!

4.感言

最后感谢看到本章的小伙伴们,如有什么问题欢迎指出,第一次写文章写的不太好,大家体谅一下,谢谢!!!



/template/Home/Zkeys/PC/Static