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 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 Javascript
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
Feb 03 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
Oct 10 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
Webpack如何引入bootstrap的方法
Jun 17 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
JavaScript命令模式原理与用法实例详解
Mar 10 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
Vue使用预渲染代替SSR的方法
Jul 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中设置多级目录session的问题
2011/08/08 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
postman的安装与使用方法(模拟Get和Post请求)
2018/08/06 PHP
javascript 判断数组是否已包含了某个元素的函数
2010/05/30 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
jQuery 全选 全不选 事件绑定的实现代码
2017/01/23 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
浅析Python 中整型对象存储的位置
2016/05/16 Python
python爬虫之BeautifulSoup 使用select方法详解
2017/10/23 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
django用户登录验证的完整示例代码
2019/07/21 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Python数据库封装实现代码示例解析
2020/09/05 Python
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
大学生个人求职信范文
2013/09/21 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
婚前协议书怎么写
2014/04/15 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
Python进行区间取值案例讲解
2021/08/02 Python