JS在IE和FireFox之间常用函数的区别小结


Posted in Javascript onMarch 12, 2010

1.event.srcElement

//srcElement只能在IE下使用target是FireFox使用的,下面是兼容性写法 
var obj = e.srcElement ? e.srcElement : e.target;

2.e.originalEvent.x
// e.originalEvent.x 只能在IE下使用,FireFox只能使用e.originalEvent.layerX,下面是兼容性写法 
var positionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset().left || 0;

3.windows.event
window.event只能在IE下运行,而不能在Firefox下运行,
这是因为Firefox的event只能在有事件发生的情况下使用
IE:
<input type="button" value="测试IE下的Event" onclick="test1()"/> 
<input type="button" value="测试Event的兼容性" onclick="test2()"/> 
<script language="javascript"> function test1() { 
alert(window.event); //使用 window.event 
} 
function test2(evt) { 
evt=evt?evt:(window.event?window.event:null); 
alert(evt); //使用参数evt 
} 
</script>

以下是一个例子:
在画面上点击回车时,不触发事件,但是在TextArea这样的框中点击回车触发事件。大家可以修改代码,以供自己使用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>s</title> 
<script language="javascript"> 
document.onkeydown=keypage 
function keypage(e) { 
eevt=e?e:(window.event?window.event:null); 
if (evt.keyCode==13) { 
if (window.XMLHttpRequest) { // IE7 FF MO 
//alert(( evt ? evt.explicitOriginalTarget : null).tagName) 
if(( evt ? evt.explicitOriginalTarget : null).tagName =="TEXTAREA"){ 
var obj = evt ? evt.explicitOriginalTarget : null; 
alert("ID:="+obj.id) 
} 
} else { // IE6 
if(document.activeElement.type== "textarea") { 
var obj = document.activeElement 
alert("ID:="+obj.id) 
} 
} 
} 
} </script> 

</head> 
<body> 
<input id="test1"type="text" > 
<br> 
<input id="test2" type="text" > 
<br> 
<input id="test3" type="button" > 
<br> 
<textarea id="test4"></textarea> 

</body> 
</html>

4.innerText

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>关注一下IE和Firefox的兼容性</title> 
</head> 
<script language="javascript"> function testInnerText(){ 
if(navigator.appName.indexOf("Explorer") > -1){ 
document.getElementById('element').innerText = "my text"; 
} else{ 
document.getElementById('element').textContent = "my text"; 
} 
} </script> 
<body> 
<input name="Button" type="button" value="testInnerText" onclick="javascript:testInnerText()"/> 
<div id="element" style="border:1px solid #0066CC; width:100px; height:50px"></div> 
</body> 
</html>

5.CSS "float" 属性

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

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";
6.元素的计算样式

通过使用上述的 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;

7.获取元素的"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");

8.获取 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 方法来说也是同样的语法。

9.获取光标位置

获取元素的光标位置比较少见,如果需要这么做,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;

10.获取视窗或浏览器窗口的尺寸

有时需要找出浏览器的有效窗口空间的尺寸,一般成为"视窗"。

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;

11.Alpha 透明

嗯,这其实不是 JavaScript 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时,这就需要通过获取 CSS 的 alpha 设定来实现,一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码:

IE 语法:

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

Firefox 语法:
#myElement { 
opacity: 0.5; 
}

要使用 JavaScript 获取这些值,需要使用 style 对象:

IE 语法:

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

Firefox 语法:
var myObject = document.getElementById("myElement"); 
myObject.style.opacity = "0.5″;

当然,已经说到了,一般是在循环中间来改变 opcity/alpha,来创建动画效果,但这这是个简单的例子,只是为了明白地描述方法是如何实现地。
作者: HeroBeast
Javascript 相关文章推荐
jquery CSS选择器笔记
Mar 29 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
原生js实现瀑布流布局
Mar 08 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
Aug 26 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
javascript offsetX与layerX区别
Mar 12 #Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 #Javascript
javascript 图片上一张下一张链接效果代码
Mar 12 #Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 #Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 #Javascript
jquery 简单的进度条实现代码
Mar 11 #Javascript
精通JavaScript 纠正 cleanWhitespace函数
Mar 11 #Javascript
You might like
深入解析php之apc
2013/05/15 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
不用写JS也能使用EXTJS视频演示
2008/12/29 Javascript
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
JavaScript中九种常用排序算法
2014/09/02 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
在JavaScript应用中实现延迟加载的方法
2015/06/25 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
简单了解Pandas缺失值处理方法
2019/11/16 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
python实现移动木板小游戏
2020/10/09 Python
Python类class参数self原理解析
2020/11/19 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
帕克纽约:PARKER NY
2018/12/09 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
班主任新年寄语
2014/04/04 职场文书
校本教研活动总结
2014/07/01 职场文书
关于美容院的活动方案
2014/08/14 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
民间借贷协议书范本
2014/10/01 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
《孙子兵法》:欲成大事者,需读懂这些致胜策略
2019/08/23 职场文书