您的位置:首页 > Web前端 > JavaScript

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

2014-02-27 16:28 681 查看
今天写一个导航时,用了一段纯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');
}
}
}


浏览器测试,问题解决。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: