IE和Firefox之间的JavaScript差异

2016-02-19 15:52 4 1 收藏

每个人都希望每天都是开心的,不要因为一些琐事扰乱了心情还,闲暇的时间怎么打发,关注图老师可以让你学习更多的好东西,下面为大家推荐IE和Firefox之间的JavaScript差异,赶紧看过来吧!

【 tulaoshi.com - Web开发 】

    这篇文章中,我会略述一下 Internet Explorer 和 Firefox 在 JavaScript 语法上不同的几 个方面。

    1. CSS “float” 属性

    获取给定对象的特定 CSS 属性的基本语法是 object.style 属性,而且有连字符的属性要用骆驼命名法来代替。例如,获取一个 ID 为 “header” 的 div 的 background-color 属性,我们要用如下语法:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

document.getElementById("header").style.borderBottom= "1px solid #ccc";

    但是由于 “float” 是 JavaScript 的保留词,我们就无法使用 object.style.float 来获取 “float” 属性了。一下是我们在两种浏览器中的使用的方法:

    IE 语法:

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

    Firefox 语法:

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;

    Firefox 语法:

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

    3. 获取元素的”class”属性

    类似于”float”属性的情况,这两种浏览器使用不同的 JavaScript 方法来获取这个属性。

    IE 语法:

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

    Firefox 语法:
var myObject = document.getElementById("header");
var myAttribute = myObject.getAttribute("class");

    4. 获取 label 标签的 “for” 属性

    和 3 一样,使用 JavaScript获取 label 的 “for” 属性也有不同语法。

    IE 语法:

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

    Firefox 语法:

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

    对于 setAtrribute 方法来说也是同样的语法。

    5. 获取光标位置

    获取元素的光标位置比较少见,如果需要这么做,IE 和 Firefox 的语法也是不同的。这个示例代码是相当基础的,一般用作许多复杂事件处理的一部分,这里仅用来描述差异。需要注意的是,IE 中的结果和 Firefox 中是不同的,因此这个方法有些问题。通常,这个差异可以通过获取 “滚动位置” 来补偿 - 但那是另外一篇文章的课题了。

    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;

来源:http://www.tulaoshi.com/n/20160219/1610603.html

延伸阅读
标签: Web开发
w3c规范中getElementsByName是按着name属性进行检索的,而MS的IE却是按着id来检索。导致不能得到应该得到的Elements,为适应浏览器,我们可以做一下调整:  一、把需要用getElementsByName的name都加上id,且id和name相同。  二、用一个函数来适应浏览器,代码如下:  代码如下: getElementsByName:function (name)&nb...
从语法上看,在函数里声明参数与在catch子句中声明参数几乎没有什么差别: class Widget { ... }; //一个类,具体是什么类 // 在这里并不重要 void f1(Widget w); // 一些函数,其参数分别为 void f2(Widget& w); // Widget, Widget&,或 void f3(const Widget& w); // Widget* 类型 void f4(Widge...
标签: Web开发
一、document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"];Firefox下,只能使用document.formName.elements["elementName"]。 解决方法:统一使用document.formName.elements["elementName"]。 二、集合类对象问题 问题说...
标签: Web开发
区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; 注:IE都能识别*;标准浏览器(如FF)不能识别*; IE6能识别*,但不能识别 ...
标签: Web开发
很久都没有写关于代码方面的文章了。主要原因还是因为最近的工作都集中在需求分析方面,没有了现实中的感触,就没有了写作的动机。讨论一个关于JScript执行顺序的问题。示例代码如下: a.htm A onmouseup="func('onmouseup')" href="b.htm"Click Me!/A A onclick="func2('onclick')" href="d.htm"Click Me!/A SPAN id=msg/SPAN SCRIPT functi...

经验教程

878

收藏

69
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部