`

JavaScript在Firefox与IE下的差异

 
阅读更多

 

转载:http://www.nowamagic.net/librarys/veda/detail/452

尽管那需要用长串的、沉闷的不同分支代码来应付不同浏览器的日子已经过去,偶尔还是有必要做一些简单的区分和目标检测来确保某块代码能在用户的机器上正常运行。下面介绍一些在IE和Firefox中不同的JavaScript句法。

CSS "float" 值

访问一个给定CSS 值的最基本句法是:object.style.property,使用驼峰写法来替换有连接符的值,例如,访问某个ID为"header"的<div>的 background-color值,我们使用如下句法:

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

但由于"float"这个词是一个JavaScript保留字,因此我们不能用 object.style.float来访问,这里,我们可以在两种浏览器中这么做:

在IE中这样写:

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

在Firefox中这样写:

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

元素的推算样式

JavaScript可以使用object.style.property句法,方便地在外部访问和修改某个CSS样式,但其限制是这些句法 只能取出已设的行内样式或者直接由JavaScript设定的样式。并不能访问某个外部的样式表。为了访问元素的"推算"样式,我们可以使用下面的代码:

在IE中这样写:

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

在Firefox中这样写:

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

访问元素的"class"

像"float"一样,"class"是JavaScript的一个保留字,在这两个浏览器中我们使用如下句法来访问"class"。

在IE中这样写:

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

在Firefox中这样写:

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

访问<label>标签中的"for"

就第3点中所提到的,我们同样需要使用不现的句法区分来访问<label>标签中的"for":

在IE中这样写:

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

在Firefox中这样写:

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

获取鼠标指针的位置

计算出鼠标指针的位置对你来说可能是非常少见的,不过当你需要的时候,在IE和Firefox中的句法是不同的。这里所写出的代码将是最最基 本的,也可能是某个复杂事件处理中的某一个部分。但他们可以解释其中的异同点。同时,必须指出的是结果相对于Firefox,IE会有更在的不同,这种方 法本身就是有BUG的。通常,这种不同可以用"拖动位置"来得到补偿。

在IE中这样写:

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

在Firefox中这样写:

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

获取可见区域、窗口的大小

有时,我们会需要找到浏览器的可视位置的大小,通常我们称之为"可见区域"。

在IE中这样写:

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

在Firefox中这样写:

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

Alpha 透明

好吧,这并不是一个JavaScript句法问题,而是源自于CSS的Alpha透明。但当某个物体需要淡入/出则需要 JavaScript来表现,这是通过访问CSS的Alpha透明设置来完成的,通常在一个循环中完成。你需要通过来修改的JavaScript的代码如 下:

在IE中这样写:

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

在Firefox中这样写:

1 #myElement { opacity: 0.5; }

在IE中这样写:

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

在Firefox中这样写:

1 var myObject = document.getElementById("myElement"); myObject.style.opacity = "0.5";
分享到:
评论

相关推荐

    javascript在firefox与ie下的兼容性总结

    JavaScript在Firefox和IE之间的兼容性问题一直是前端开发者面临的一大挑战。由于这两个浏览器内核的不同,导致在处理某些JavaScript特性时存在差异。以下是一些常见的兼容性问题及其解决方案: 1. **Document.form....

    JavaScript在IE和Firefox(火狐)的不兼容问题解决

    标题与描述均聚焦于“JavaScript在IE和Firefox(火狐)的不兼容问题解决”,这表明文章旨在探讨并提供解决方案来处理在不同浏览器环境下的JavaScript兼容性问题,尤其是在Internet Explorer(IE)和Mozilla Firefox...

    js在IE与firefox的差异集锦

    特别是在使用JavaScript编程语言时,IE和Firefox两个浏览器在很多方面的实现都存在差异。本文将详细介绍这些差异并提供相应的解决方法。 1. 关于innerText属性的支持: Firefox浏览器不支持innerText属性,而支持...

    Javascript的IE和Firefox(火狐)兼容性

    ### Javascript的IE与Firefox(火狐)兼容性解决方案 在Web开发过程中,浏览器兼容性问题一直是开发者们关注的重点之一。由于不同的浏览器对于Web标准的支持程度存在差异,这导致了同样的代码在不同浏览器中的表现...

    javascript在IE和Firefox中兼容性问题

    本篇将主要探讨JavaScript在Internet Explorer (IE) 和Firefox之间的兼容性挑战,并通过给出的文件名列表解析这些测试用例所涉及的知识点。 1. **createDocument测试.html** 在IE和Firefox中,创建XML文档的方法...

    IE和Firefox对JavaScript的兼容

    然而,由于不同的浏览器对其解析和执行的方式存在差异,尤其是IE(Internet Explorer)和Firefox,这导致了JavaScript在不同浏览器间的兼容性问题。这份文档“IE火狐的JavaScript兼容.doc”深入探讨了这些差异,并...

    Javascript的IE和Firefox兼容性参考

    JavaScript是一种广泛应用于网页开发的脚本语言,但在不同的浏览器中,其执行方式可能存在差异,特别是老版本的Internet Explorer(IE)和Firefox。由于历史原因,IE对某些特性有着独特的实现,而Firefox则遵循更...

    Javascript的IE和Firefox兼容性问题集合

    然而,由于不同的浏览器对JavaScript的支持程度和实现方式存在差异,尤其是Internet Explorer(IE)和Firefox这两款流行浏览器,开发者经常需要面对兼容性问题。以下是一些常见的JavaScript在IE和Firefox上的兼容性...

    Javascript在IE和FireFox中的兼容处理

    以上只是JavaScript在IE与Firefox中兼容性问题的一部分,实际开发中可能遇到更多细节。解决这些问题需要对两种浏览器的特性有深入理解,并使用条件注释、polyfills和现代JavaScript库(如jQuery)来确保代码在各种...

    Javascript在IE和FireFox中的不同表现

    - IE的`onreadystatechange`事件在某些情况下处理方式与Firefox不同。 7. **定时器**: - `setTimeout`和`setInterval`在IE中可能存在精度问题,而Firefox通常更准确。 8. **错误处理**: - IE使用`try...catch...

    js在火狐和IE浏览器的差异.zip

    本文件“js在火狐和IE浏览器的差异.zip”着重讨论了JavaScript在Mozilla Firefox(火狐)与Internet Explorer(IE)之间的区别,以下是对这些差异的详细阐述: 1. **DOM操作差异**: - Firefox和IE对Document ...

    让IE和火狐同时兼容

    特别是在早期的Web时代,Internet Explorer(简称IE)与Mozilla Firefox(简称火狐)这两款浏览器之间存在着显著的差异,这使得页面设计师不得不花费大量时间去解决它们之间的兼容性问题。本文将详细介绍如何使网站...

    火狐和IE支持javaScript脚本的一些区别

    标题与描述均提到了“火狐和IE支持javaScript脚本的一些区别”,这明确指出了文章将探讨在Mozilla Firefox和Internet Explorer(IE)浏览器中JavaScript脚本的不同支持情况。以下是对给定文件中提及的各个知识点的...

    浏览器Firefox与IE在CSS样式表中的差异汇编.pdf

    浏览器Firefox与Internet Explorer(IE)在CSS样式表的解析上存在一些显著的差异,这些差异在实际开发过程中可能引起布局不一致或者样式显示错误。以下是一些关键的区别和解决策略: 1. **CSS Hack** - 为了针对...

    javascript 调试工具/教程,支持浏览器IE firefox

    以下是对标题和描述中涉及的知识点的详细说明,以及如何在IE和Firefox中进行JavaScript调试。 **一、JavaScript调试的重要性** JavaScript调试是开发过程中不可或缺的环节,它可以帮助开发者找出代码中的错误、性能...

    IE和Firefox差异参考大全

    在互联网的早期,IE(Internet Explorer)和Firefox(火狐浏览器)是两个主要的Web浏览平台,它们在处理CSS(层叠样式表)和JavaScript方面存在显著的差异。这些差异对于开发者来说至关重要,因为它们影响了网站在...

    Firefox和IE兼容参考

    在网页开发过程中,Firefox(火狐浏览器)和Internet Explorer(IE浏览器)的兼容性问题一直是一大挑战。这两个浏览器在解析HTML、CSS以及JavaScript时有着不同的实现方式,导致某些代码在Firefox下正常运行,但在IE...

    css和javascript在IE和Firefox中二十三个不同点

    CSS和JavaScript在Internet Explorer(IE)和Firefox这两个浏览器中存在诸多差异,这些差异主要体现在DOM操作、属性访问、事件处理等方面。以下是一些关键的不同点: 1. **文档对象模型(DOM)操作** - **form元素...

Global site tag (gtag.js) - Google Analytics