整理浏览器对网页的兼容性问题-DOM节点属性的访问

1.      原来在IE中设置HTML对象属性的方法如：document.all.apple.width=100或者apple.width=100；现在为了能够和FireFox兼容，对象属性的设置写为：document.getElementById(‘元素ID属性值’).setAttribute(‘width’, ‘100’)

document.getElementsByTagName(‘元素标签名’)[0].setAttribute(‘width’, ‘100’)

对象属性的获取写为：

document.getElementById(‘元素ID属性值’).getAttribute(‘width’)

document.getElementsByTagName(‘元素标签名’)[0].getAttribute(‘width’)

 

2.      (接上条) 在IE下不能正确使用setAttribute来设置对象的style、class以及事件响应属性, 因此还得按原来的方法来访问和设置，以达到兼容各种浏览器的效果

如下例：

document.getElementById(‘元素ID属性值’).class

document.getElementById(‘元素ID属性值’).style.color

document.getElementById(‘元素ID属性值’).onclick

document.getElementById(‘元素ID属性值’).class="classname"

document.getElementById(‘元素ID属性值’).style.color="colorname"

document.getElementById(‘元素ID属性值’).onclick= function(){alert(‘函数内容’)}

 

3.      在FireFox中，自己定义的属性必须用getAttribute()方法获取，不能像在IE下直接获取

 

解决办法：统一用getAttribute()方法获取

 

4.      img标签具有title和alt两个属性，title用作图片的tip说明，alt用在图片不存在或加载失败时的提示；在IE中若未定义title则alt也承担了title的作用，但在FireFox则各司其职；因此为保证浏览器兼容最好各尽其用

 

5.      IE中要操作某个节点(Node)的class要用”classname”做为属性名来设置或取得，FireFox和其它浏览器用”class”做为属性名来设置或取得

 

6.      设置某个节点(Node)的style,如果用”style” 做为属性名其它浏览器都能解析，但IE会忽略；如果用”cssText” 做为属性名其它浏览器都能解析，但Opera会忽略;通用代码如下：

var oStyle = oNode.getAttribute("style");

if(oStyle == "[object]"){

oStyle.setAttribute("cssText", strStyle);

oNode.setAttribute("style", oStyle);

}else{

oNode.setAttribute("style", strStyle);

}