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

今天写一个导航时,用了一段纯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'); 
		} 
	}						 
} 

浏览器测试,问题解决。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: setattribute和getattribute是JavaScript的两个方法,用于设置和获HTML元素的属性setattribute方法可以用来设置HTML元素的属性,例如: ``` document.getElementById("myElement").setAttribute("class", "myClass"); ``` 这会将ID为“myElement”的元素的class属性设置为“myClass”。 getattribute方法可以用来获HTML元素的属性,例如: ``` var myClass = document.getElementById("myElement").getAttribute("class"); ``` 这会将ID为“myElement”的元素的class属性的值存储在变量myClass。 ### 回答2: setAttribute和getAttribute都是Javascript常用的方法,主要用于操作和获HTML元素的属性setAttribute方法可以用来动态地改变HTML元素的属性值,例如: document.getElementById("myImg").setAttribute("src", "newImg.jpg"); 这段代码会将id为“myImg”的元素的src属性修改为“newImg.jpg”。setAttribute方法有两个参数,第一个参数是要设置的属性名,第二个参数是要设置的属性值。 getAttribute方法则用于获HTML元素的属性值,例如: var title = document.getElementById("myTitle").getAttribute("title"); 这段代码会获id为“myTitle”的元素的title属性值,并将其赋值给变量“title”。getAttribute方法有一个参数,即要获属性名。 需要注意的是,setAttribute和getAttribute只能操作和获HTML元素的标准属性,不能操作和获行内样式的属性。如果要操作和获行内样式的属性,需要使用style属性。 另外,需要注意的是,在HTML5规范,可以直接通过对象.属性的方式来设置和获HTML元素的标准属性,例如: document.getElementById("myImg").src = "newImg.jpg"; var title = document.getElementById("myTitle").title; 但是,这种方式只适用于HTML元素的标准属性,不能操作和获非标准属性或自定义属性。因此,在一些较老的浏览器,仍然需要使用setAttribute和getAttribute方法来操作和获HTML元素的属性。 ### 回答3: setAttribute和getAttribute是JavaScriptDOM(Document Object Model)的元素属性操作方法。setAttribute方法用于设置指定元素的属性值,而getAttribute方法用于获指定元素的属性值。 setAttribute方法需要两个参数:属性名和属性值。例如,如果要将元素的class属性设置为“myclass”,则可以使用以下代码: element.setAttribute("class", "myclass"); 使用getAttribute方法来检索属性值。例如,如果想要获元素的class属性的值,则可以使用以下代码: var classname = element.getAttribute("class"); 当使用setAttribute方法设置属性值时,它将覆盖任何现有的相同属性。因此,在设置属性值之前,最好先检查其是否已存在。 getAttribute方法返回属性值的字符串表示形式。如果属性不存在,则返回null。请注意,它不会返回数字对象或布尔值。 在JavaScriptsetAttribute和getAttribute方法不仅适用于HTML元素,也适用于XML文档的元素。因此,在处理XML文档时,这些方法比较有用。 总之,setAttribute和getAttribute方法对于操作DOM元素的属性非常有用,可以帮助我们控制HTML和XML文档的表现和行为。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值