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一组验证函数
Dec 20 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
jquery高效反选具体实现
May 05 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
关于使用js算总价的问题
Jun 23 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
js实现蒙版效果
Jan 11 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
jQuery实现电梯导航模块
Dec 22 jQuery
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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
浅谈javascript的调试
2015/01/28 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
2016/11/01 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
VUE实现密码验证与提示功能
2019/10/18 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Python strip lstrip rstrip使用方法
2008/09/06 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
Django+RestFramework API接口及接口文档并返回json数据操作
2020/07/12 Python
使用pandas实现筛选出指定列值所对应的行
2020/12/13 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
PHP面试题集
2016/12/18 面试题
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
《三峡》教学反思
2014/03/01 职场文书
初中家长评语大全
2014/12/26 职场文书
失恋33天观后感
2015/06/11 职场文书
党员身份证明材料
2015/06/19 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫