关于使用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');
}
}
}
浏览器测试,问题解决。
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');
}
}
}
浏览器测试,问题解决。
相关文章推荐
- 使用jquery动态修改dom元素属性在IE下的问题
- DOM的基本方法与IE和FF的JS兼容问题
- 关于ff和ie共用js输出flash的问题
- 关于使用struts2与jsp时,使用prototype.js的$属性与jquery的$冲突问题
- IE 混淆了 DOM 对象属性(property)及 HTML 标签属性(attribute),造成了对 setAttribute、getAttribute 的不正确实现
- IE中使用setAttribute方法设置属性的问题
- JS getAttribute和setAttribute(取得和设置属性)的使用介绍
- JS之 DOM事件监听的兼容性问题 IE 和 FF
- 关于一些基础的js对象的属性和方法问题
- 关于使用JS动态修改CSS样式问题
- IE中关于使用innerHTML加入HTML代码的问题
- android 关于使用SharedPreferences来保存对象里既有属性又有集合的问题
- 常用JS调试工具使用方法,帮你快速定位问题(Firebug+ IE“开发人员工具”)
- JS的IE和FF兼容性问题汇总
- js-dom-动态创建html标签时,name属性的初始化问题
- IE兼容问题解决根源:深刻理解hasLayout属性,原理与使用方法
- 关于超链接标签 a 里的属性调用js的问题 以及yii button里面调用cgridview 某一行数据
- 关于使用Adoeb SVG Viewer在IE中无法正常显示SVG文档的问题
- JavaScript js 兼容浏览器问题 兼容FireFox(FF)、IE的解决方法
- 关于JavaScript兼容FF和IE的方法(IE、FF下的srcElement属性)