关于使用js的setAttribute和getAttribute取dom属性在ie ff safri下的问题

最新推荐文章于 2022-04-29 12:05:18 发布

原创最新推荐文章于 2022-04-29 12:05:18 发布 · 6.4k 阅读

0 ·

CC 4.0 BY-SA版权

前端开发专栏收录该内容

68 篇文章

订阅专栏

本文介绍了一段纯JS代码在不同浏览器中设置HTML元素CSS class遇到的问题及解决方案，特别是getAttribute和setAttribute方法在IE与W3C标准浏览器间的差异。

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

今天写一个导航时，用了一段纯js来设置html元素的css class类，代码如下：

var subdivs = obj.getElementsByTagName("DIV"); 
var subas = obj.getElementsByTagName("A");
if(subdivs.length>0){ 
	if(subdivs[0].getAttribute("class") == "expendDiv"){
		if(tag==1){ 
				subdivs[0].style.display = "block"; 
				if(subas.length>0){
					subas[0].setAttribute("class",subas[0].getAttribute("class")+' '+'menuLi2'); 
				}
		} 
		else { 
				subdivs[0].style.display = "none";         
				subas[0].setAttribute("class",'menuLi'); 
		} 
	}						 
}

在safari下面，没啥问题，导航正常显示，可是一换ie浏览器，出问题了，导航死活出不来。

于是，疯狂上网搜资料，总算找到了原因。原来getAttribute和setAttribute在不同浏览器，用法也有区别，下面我引用

一段搜到的资料来说明：

我们通过Js脚本对DOM 节点进行修改其样式class的时候，常常是使用如下的方式进行操作：

element.className = 'xxxClass';

而我们知道，element中有一个设置属性值的API——setAttribute(propertyName, propertyValue);那么我们会想，是否可以通过调用该API进行设置元素的样式class呢？答案是肯定的，代码如下：

element.setAttribute('className', 'xxxClass');

但通过在IE，FireFox，Chrome，safari，Opera等浏览器测试中发现，第二种设置样式class的方法，只能在IE下生效，而其他W3C标准的浏览器是无效的。

但通过改成另外一种方式，则在W3C下是生效的，但在IE下是无效的：

element.setAttribute('class', 'xxxClass');

从上面的结论中，我们可以看出，如果要使用setAttribute方法对元素节点进行设置样式class，则必须针对IE和其他W3C标准的浏览器分别设置class和className的属性名，但使用下面的快捷方式，则在各个浏览器中均有效：

element.className = 'xxxClass';

这就是为什么我们需要直接使用className进行设置的原因。

综上所述，我的代码只要把使用getAttribute和setAttribute的地方，全用className来代替就行了，替换后代码如下：

var subdivs = obj.getElementsByTagName("DIV"); 
var subas = obj.getElementsByTagName("A");
if(subdivs.length>0){ 
	if(subdivs[0].className == "expendDiv"){
		if(tag==1){ 
				subdivs[0].style.display = "block"; 
				if(subas.length>0){
					subas[0].className = subas[0].className+' '+'menuLi2';
					//subas[0].setAttribute("className",subas[0].getAttribute("className")+' '+'menuLi2'); 
				}
		} 
		else { 
				subdivs[0].style.display = "none";
				subas[0].className = "menuLi"; 
				//subas[0].setAttribute("className",'menuLi'); 
		} 
	}						 
}

浏览器测试，问题解决。