火狐与IE的7个JavaScript差别

原文:http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/#comment-624

作者注:本篇文章宣布于2009.04.27,是一篇关于议论Javascript在IE6、IE7和FF2+、FF3.0之间的存在的题目的文章。

只管须要用冗杂的JavaScript代码去辨认特定的浏览器的汗青已过去,然则,偶然有必要用一段简朴的JavaScript代码和对象检测来确保特定的JavaScript代码块能够在用户的机械上运转。在这篇文章中,我将会从7个方面概述IE和FF在JavaScript语法上的差异。

1、CSS的“float”属性

猎取给定对象的特定 CSS 属性的基本语法是 object.style.property,有连字符的属性要用骆驼定名法来替代,比方,猎取一个 ID 为 “header” 的 div 的 background-color 属性,语法以下:

 document.getElementById("header").style.backgroundColor= "#ccc";    

然则自从JavaScript将float作为保留字,我们不能用object.style.float语法来猎取该属性。在IE和FF中,我们能够如许做:

IE语法:

 document.getElementById("header").style.styleFloat = "left";    

FF语法:

document.getElementById("header").style.cssFloat = "left";  

2、元素的盘算款式

经由过程运用上述的 object.style.property, JavaScript 能够很轻易的猎取和修正对象的设定 CSS 款式。然则这一语法的范围在于,它只能获得内联在 HTML 里的款式,或许直接运用 JavaScript 设定的款式。style 对象不能猎取运用外部款式表设定的款式。为了猎取对象的”盘算款式”,我们运用以下代码:

IE语法:

var myObject = document.getElementById("header");    
var myStyle = myObject.currentStyle.backgroundColor;  

FF语法:

var myObject = document.getElementById("header");    
var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);    
var myStyle = myComputedStyle.backgroundColor;    

3、猎取元素的class属性

相似于”float”属性,IE和FF用均能够用JavaScript的getAttribute要领,然则语法略有差异:

IE语法:

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

FF语法:

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

一样的差异也适用于setAttribute要领。

4、猎取label标签的for属性

与上述相似,我们有差别的JavaScript语法来猎取label标签的for属性。

IE语法:

var myObject = document.getElementById("myLabel");    
var myAttribute = myObject.getAttribute("htmlFor");    

FF语法:

var myObject = document.getElementById("myLabel");    
var myAttribute = myObject.getAttribute("for");    

5、猎取光标位置

猎取元素的光标位置比较少见,假如须要这么做,IE 和 Firefox 的语法也是差别的。这个示例代码是相称基本的,平常用作很多庞杂事宜处置惩罚的一部分,这里仅用来形貌差异。须要注重的是,IE 中的结果和 Firefox 中是差别的,因而这个要领有些题目。一般,这个差异能够经由过程猎取 “转动位置” 来赔偿 - 但那是别的一篇文章的课题了。

IE语法:

var myCursorPosition = [0, 0];    
myCursorPosition[0] = event.clientX;    
myCursorPosition[1] = event.clientY;    

FF语法:

var myCursorPosition = [0, 0];    
myCursorPosition[0] = event.pageX;    
myCursorPosition[1] = event.pageY;    

6、猎取视窗或浏览器窗口的大小

偶然须要找出浏览器的有用窗口空间的尺寸,平常成为”视窗”。

IE语法:

var myBrowserSize = [0, 0];    
myBrowserSize[0] = document.documentElement.clientWidth;    
myBrowserSize[1] = document.documentElement.clientHeight;    

FF语法:

var myBrowserSize = [0, 0];    
myBrowserSize[0] = window.innerWidth;    
myBrowserSize[1] = window.innerHeight;    

7、Alpha通明处置惩罚

这不是JavaScript的语法题目,alpha transparency是经由过程css设置的。然则当对象经由过程 JavaScript 设置为淡入淡出时,这就须要经由过程猎取 CSS 的 alpha 设置,在轮回内部来完成。要经由过程以下 JavaScript 来转变 CSS 代码。

IE语法:

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

FF语法:

#myElement {    
    opacity: 0.5;    
}    

为了让JavaScript猎取这些值,须要运用style对象。

IE语法:

var myObject = document.getElementById("myElement");    
myObject.style.filter = "alpha(opacity=80)";    

FF语法:

var myObject = document.getElementById("myElement");    
myObject.style.opacity = "0.5";    

固然,正如提到的,须要经由过程内部轮回来修正alpha/opacity值来完成动画结果,但这只是一个用来讲用它的事情道理的简朴例子。

另有其他差异吗?

这些差异是我个人在开辟或许研讨中遇到的,固然另有其他方面的差异,假如你以为我遗漏了某一个主要的方面,能够留下你的批评,我会去更新这份差异列表,或许在宣布一篇blog。

译文首发:http://www.ido321.com/65.html

    原文作者:不写代码的码农
    原文地址: https://segmentfault.com/a/1190000002498752
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞