IE与其他浏览器的简要分析

IE与其他浏览器的简要分析

一、常规API
获取HTML元素
IE：支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)

自定义属性问题
IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；Firefox下，只能使用 getAttribute() 获取自定义属性。

Ajax请求
IE: new ActiveXObject()
FF、Chrome：new XMLHttpRequest()

获取HTML元素
IE：支持el.name 、el.getAttribute(name)
FF、Chrome:基本属性支持el.name其余属性仅支持el.getAttribute(name)

innerText的使用
FF不支持innerText，它支持textContent来实现innerText，不过textContent没有像innerText一样考虑元素的display方式，所以不完全与IE兼容。如果不用textContent，字符串里面不包含HTML代码也可以用innerHTML代替。
if(document.all){
document.getElementById(‘element’).innerText = “mytext”;
} else{
document.getElementById(‘element’).textContent = “mytext”;
}

获取可见区域、窗口的大小
有时，我们会需要找到浏览器的可视位置的大小，通常我们称之为”可见区域”。
在IE中这样写：
var myBrowserSize = [0, 0];
myBrowserSize[0] = document.documentElement.clientWidth;
myBrowserSize[1] = document.documentElement.clientHeight;
在Firefox中这样写：
var myBrowserSize = [0, 0];
myBrowserSize[0] = window.innerWidth;
myBrowserSize[1] = window.innerHeight;
Alpha 透明
这并不是一个JavaScript句法问题，而是源自于CSS的Alpha透明。但当某个物体需要淡入/出则需要JavaScript来表现，这是通过访问CSS的Alpha透明设置来完成的，通常在一个循环中完成。你需要通过来修改的JavaScript的代码如下：:
在IE中这样写：

myElement { filter: alpha(opacity=50); }

在Firefox中这样写：

myElement { opacity: 0.5; }

在IE中这样写：
var myObject = document.getElementById(“myElement”);
myObject.style.filter = “alpha(opacity=80)”;
在Firefox中这样写：
var myObject = document.getElementById(“myElement”); myObject.style.opacity = “0.5”;

CSS “float” 值
访问一个给定CSS 值的最基本句法是：object.style.property，使用驼峰写法来替换有连接符的值，例如，访问某个ID为”header”的

的 background-color值，我们使用如下句法：
document.getElementById(“header”).style.backgroundColor= “#ccc”;
但由于”float”这个词是一个JavaScript保留字，因此我们不能用object.style.float来访问，这里，我们可以在两种浏览器中这么做：
在IE中这样写：
document.getElementById(“header”).style.styleFloat = “left”;
在Firefox中这样写：
document.getElementById(“header”).style.cssFloat = “left”;

元素的推算样式
JavaScript可以使用object.style.property句法，方便地在外部访问和修改某个CSS样式，但其限制是这些句法只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的”推算”样式，我们可以使用下面的代码：
在IE中这样写：
var myObject = document.getElementById(“header”);
var myStyle = myObject.currentStyle.backgroundColor;
在Firefox中这样写：
var myObject = document.getElementById(“header”);
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
var myStyle = myComputedStyle.backgroundColor;

访问元素的”class”
“class”是JavaScript的一个保留字，在这两个浏览器中我们使用如下句法来访问”class”。
在IE中这样写：
var myObject = document.getElementById(“header”);
var myAttribute = myObject.getAttribute(“className”);
在Firefox中这样写：
var myObject = document.getElementById(“header”);
var myAttribute = myObject.getAttribute(“class”);
二、事件API
1、表示发生事件：
（1）非IE浏览器下，事件对应的函数有一个隐藏的变量e，表示发生事件。
（2）IE下，不需要e变量，window.event表示发生事件。
解决方案：用e||window.event来兼容。
2、触发事件对象（触发事件的元素被认为是目标target）：
（1）IE下，window.event对象有srcElement属性，但没有target属性。
（2）Firefox下，e对象有target属性，但没有srcElement属性。
（3）Chrome下，e对象同时具有target和srcElement属性。
解决方案：event.srcElement ? event.srcElement : event.target来兼容。
3、按键码（字符代码）：
（1）IE下，window.event对象只有keyCode属性。
（2）FireFox下，e对象有which和charCode属性。
（3）Opera下，e对象有keyCode和which属性。
（4）Chrome下，e对象有keyCode、which和charCode属性。
解决方案：用e.keyCode || e.which || e.charCode来兼容。
4、阻止事件的默认行为：
（1）IE 中阻止事件的默认行为需要将window.event.returnValue属性设置为false。
（2）非IE阻止事件的默认行为需要调用 e.preventDefault() 方法。
解决方案：条件判断浏览器是否具有event.preventDefault再做相应处理。
5、阻止事件冒泡：
（1）IE阻止事件冒泡需要设置window.event.cancelBubble = true。
（2）非IE阻止事件冒泡需要调用e.stopPropagation()。
解决方案：条件判断浏览器是否具有event.stopPropagation再做相应处理。
6.获取鼠标指针的位置
计算出鼠标指针的位置对你来说可能是非常少见的，不过当你需要的时候，在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基本的，也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时，必须指出的是结果相对于Firefox，IE会有更在的不同，这种方法本身就是有BUG的。