云南龙网

  1. 首页 > 云知道 > >

JavaScript在IE和FF下的兼容性问题( 二 )

云知道


var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("className");

适用于IE8.0 以及 firefox的写法：
复制代码 代码如下:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

另外 ， 在使用setAttribute()设置Class属性的时候 ， 两种浏览器也存在同样的差异 。
复制代码 代码如下:
setAttribute("className",value);

这种写法适用于IE8.0之前的所有IE版本 ， 注意：IE8.0也不支持"className"属性了 。
setAttribute("class",value);适用于IE8.0 以及 firefox 。
【兼容处理】
方法一 ， 两种都写上：
复制代码 代码如下:
var myObject = document.getElementById("header");
myObject.setAttribute("class","classValue");
myObject.setAttribute("className","classValue");
//设置header的class为classValue

方法二 ， IE和FF都支持object.className ， 所以可以这样写：
复制代码 代码如下:
var myObject = document.getElementById("header");
myObject.className="classValue";//设置header的class为classValue

方法三 ， 先判断浏览器类型 ， 再根据浏览器类型采用对应的写法 。
4. 对象宽高赋值问题
【分析说明】FireFox中类似 obj.style.height = imgObj.height 的语句无效 。
【兼容处理】统一使用 obj.style.height = imgObj.height‘px’;
5.添加样式
【分析说明】IE中使用addRules()方法添加样式 ， 如：styleSheet.addRule("p","color:#ccc",styleSheet.length).而该方法不兼容FF ， 在FF使用insetRule()方法替换 。如styleSheet.insertRule("p{color:#ccc}",styleSheet.length).
【兼容处理】
复制代码 代码如下:
if(styleSheet.insertRule){
//insertRule()方法
}else{
//addRule()方法
}

6.最终样式
【分析说明】有时候我们自定义的样式会失效 ， 是因为发生了样式的重叠 ， 如一个类选择符定义的样式和一个标签选择符定义的样式 ， 此时后者失效 。则此时需要用到最终样式了 。IE中最终样式的写法是ele.currentStyle.属性名 。DOM中标准写法是利用document.defaultView对象 ， 如document.defaultView.getComputedStyle(elel,null),该方法兼容FF.
【兼容处理】先判断浏览器(document.all) ， 再执行上面的方法.
三、DOM方法及对象引用
1. getElementById
【分析说明】先来看一组代码：
!-- input对象访问1 --
复制代码 代码如下:
input id="id" type="button"
value="https://www.rkxy.com.cn/dnjc/click me" ōnclick="alert(id.value)"/

在Firefox中 ， 按钮没反应 ， 在IE中 ， 就可以 ， 因为对于IE来说 ， 一个HTML 元素的 ID 可以直接在脚本中当作变量名来使用 ， 而Firefox中不可以 。
【兼容处理】尽量采用W3C DOM 的写法 ， 访问对象的时候 ， 用document.getElementById("id") 以ID来访问对象 ， 且一个ID在页面中必须是唯一的 ， 同样在以标签名来访问对象的时候 ， 用document.getElementsByTagName("div")[0]。该方式得到较多浏览器的支持 。
!-- input对象访问2 --
复制代码 代码如下:
input id="id" type="button" value="https://www.rkxy.com.cn/dnjc/click me"
onclick="alert(document.getElementById(’id’).value)" /

2. 集合类对象访问
【分析说明】IE下 ， 可以使用()或[]获取集合类对象；Firefox下 ， 只能使用[]获取集合类对象 。如：
document.write(document.forms("formName").src);
//该写法在IE下能访问到Form对象的scrc属性
【兼容处理】将document.forms("formName")改为 document.forms["formName"] 。统一使用[]获取集合类对象 。
3. frame的引用
【分析说明】IE可以通过id或者name访问这个frame对应的window对象 ， 而Firefox只可以通过name来访问这个frame对应的window对象 。

推荐阅读


上一篇：My Secret Folder加密文件夹的操作方法

下一篇：安卓手机怎么投屏到电脑