`
cindylu520
  • 浏览: 147562 次
  • 性别: Icon_minigender_2
  • 来自: 大连
社区版块
存档分类
最新评论

IE与Firefox在JavaScript上的7个不同句法

    博客分类:
  • JS
阅读更多

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

1. CSS "float" 值
 访问一个给定CSS 值的最基本句法是:object.style.property,使用驼峰写法来替换有连接符的值,例如,访问某个ID为"header"的<div>的 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";

 

2. 元素的推算样式
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;

 

3. 访问元素的"class"
像"float"一样,"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");

This syntax would also apply using the setAttribute method.

 

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

IE中这样写:

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

Firefox中这样写:

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

 

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

IE中这样写:

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

Firefox中这样写:

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;

Firefox中这样写:

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

 

7. 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";

 

还有什么不同的吗?
这是作者(via: 7 JavaScript Differences Between Firefox & IE)个人根据自己的经验整理的,而sofish在JavaScript上依然是一个新手。如果还有更多的不同,欢迎大家提出来,分享出来,共同学习!

 

文章出处:标准之路(http://www.aa25.cn/div_css/788.shtml)

分享到:
评论

相关推荐

    IE和Firefox对JavaScript的兼容

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

    IE与Firefox在JavaScript上的7个不同句法分享

    本文将分享在IE和Firefox浏览器中,如何处理七个具有差异性的JavaScript句法。 1. 访问CSS的"float"值 在JavaScript中,通常可以使用element.style.property来访问和设置CSS样式。然而,"float"是一个保留字,因此...

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

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

    IE与firefox在Javascript上的区别.doc

    JavaScript 中,Internet Explorer(IE)和Mozilla Firefox(Firefox)在处理一些特定的API和语法时存在差异,这可能会导致在不同浏览器中代码的行为不一致。以下是一些主要的区别和解决方案: 1. **Document.form....

    javascript在IE和Firefox中兼容性问题

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

    在Firefox下直接调用IE浏览器(IETab这个插件).zip

    标题中的"IETab"是一个Firefox浏览器插件,它允许用户在Firefox中直接使用Internet Explorer(IE)的渲染引擎来打开网页。这个插件对于那些必须访问仅支持IE特性的网站的用户来说非常有用,因为某些老旧或特定的Web...

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

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

    ie 和 firefox 的javascript 兼容问题(网上下载的).doc

    ### IE和Firefox的JavaScript兼容性问题详解 #### 1. `document.formName.item("itemName")` 问题 在处理表单元素时,IE 和 Firefox 对 `document.formName.item("itemName")` 的支持存在差异。 **说明:** - **...

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

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

    Javascript在IE和FireFox中的不同表现

    JavaScript是一种广泛应用于Web开发的脚本语言,它在不同的浏览器中可能会有不同的行为和表现,尤其是在老版本的Internet Explorer(IE)和Firefox之间。这两个浏览器在处理JavaScript语法、DOM操作、CSS渲染等方面...

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

    以下是一些常见的JavaScript在IE和Firefox上的兼容性问题及其解决策略: 1. **事件处理**:IE使用attachEvent方法添加事件监听器,而Firefox则使用addEventListener。为确保兼容,可以创建一个跨浏览器的事件处理...

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

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

    Javascript在IE和FireFox中的兼容处理

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

    Javascript的IE和Firefox兼容性参考

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

    IE和Firefox的Javascript兼容性总结.docx

    JavaScript 兼容性问题在开发跨浏览器的网页应用时至关重要,尤其是针对IE和Firefox这两个具有显著差异的浏览器。本文将详细探讨这些差异,并提供相应的兼容性处理方案。 首先,我们来看函数和方法的差异。在...

    IE和Firefox在css,JavaScript方面的兼容性

    标题与描述均聚焦于“IE和Firefox在css,JavaScript方面的兼容性”,这涉及到网页开发中一个重要的议题:浏览器兼容性。在web开发中,确保代码能在不同浏览器上正常运行是至关重要的,因为用户可能使用各种不同的...

    Firefox IE Tab

    "Firefox IE Tab"是一款专为火狐浏览器设计的扩展,它允许用户在Firefox中以Internet Explorer内核的方式浏览网页。这个扩展对于那些需要在不同浏览器环境中测试网站兼容性的开发者或者经常在两个浏览器间切换的用户...

    js在IE和Firefox不同之处

    IE(Internet Explorer)与Firefox作为曾经及现在的主流浏览器,在处理JS方面存在一些显著的不同。下面将详细介绍这些不同之处,并提供相应的解决方案。 #### 1. `document.form.item`问题 在IE中,可以通过`...

Global site tag (gtag.js) - Google Analytics