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对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
vue2.0构建单页应用最佳实战
Apr 01 Javascript
vue router 配置路由的方法
Jul 26 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
Sep 26 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
PHP在引号前面添加反斜杠(PHP去除反斜杠)
2013/09/28 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
php curl常用的5个经典例子
2017/01/20 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python简明入门教程
2015/08/04 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
python 实现socket服务端并发的四种方式
2020/12/14 Python
canvas简易绘图的实现(海绵宝宝篇)
2018/07/04 HTML / CSS
水果连锁超市创业计划书
2014/01/24 职场文书
超市优秀员工事迹材料
2014/05/01 职场文书
合伙购房协议样本
2014/10/06 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
2014年团支部工作总结
2014/11/17 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
党支部半年考察意见
2015/06/01 职场文书
市场营销计划书
2019/04/24 职场文书
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL
深入理解 Golang 的字符串
2022/05/04 Golang