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 相关文章推荐
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
AngularJS入门教程之AngularJS模型
Apr 18 Javascript
详解vue项目构建与实战
Jun 27 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
如何将你的AngularJS1.x应用迁移至React的方法
Feb 01 Javascript
详解webpack运行Babel教程
Jun 13 Javascript
jQuery解析json格式数据示例
Sep 01 jQuery
javascript实现5秒倒计时并跳转功能
Jun 20 Javascript
vue 开发之路由配置方法详解
Dec 02 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中的Cannot modify header information 问题
2013/08/12 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
javascript学习网址备忘
2007/05/29 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
解析javascript 浏览器关闭事件
2013/07/08 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
python连接MySQL数据库实例分析
2015/05/12 Python
Python实现购物车购物小程序
2018/04/18 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
django admin组件使用方法详解
2019/07/19 Python
关于Python中的向量相加和numpy中的向量相加效率对比
2019/08/26 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
如何利用python生成MD5并去重
2020/12/07 Python
英文版网络工程师求职信
2013/10/28 职场文书
两则小学生的自我评价分享
2013/11/14 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
记账会计岗位职责
2014/06/16 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书