JS在IE和FireFox之间的区别汇总

最新推荐文章于 2024-07-12 09:36:48 发布
最新推荐文章于 2024-07-12 09:36:48 发布
阅读量70 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/HeroBeast/archive/2009/06/04/1495987.html
版权

1.event.srcElement

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

2.e.originalEvent.x

   1: // e.originalEvent.x    只能在IE下使用,FireFox只能使用e.originalEvent.layerX,下面是兼容性写法
   2:  var positionX = e.originalEvent.x - $(this).offset().left || e.originalEvent.layerX - $(this).offset().left || 0;
3.windows.event
   1: window.event只能在IE下运行,而不能在Firefox下运行, 
   2: 这是因为Firefox的event只能在有事件发生的情况下使用 
   3: IE: 
   4: <input type="button" value="测试IE下的Event" onclick="test1()"/> 
   5: <input type="button" value="测试Event的兼容性" onclick="test2()"/> 
   6: <script language="javascript">
   1:  
   2: function test1() { 
   3: alert(window.event); //使用 window.event 
   4: } 
   5: function test2(evt) { 
   6: evt=evt?evt:(window.event?window.event:null); 
   7: alert(evt); //使用参数evt 
   8: }
</ script >

以下是一个例子：
在画面上点击回车时，不触发事件，但是在TextArea这样的框中点击回车触发事件。大家可以修改代码，以供自己使用： 

   1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
   2: <html xmlns="http://www.w3.org/1999/xhtml">  
   3: <head>  
   4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
   5: <title>s</title>  
   6: <script language="javascript">
   1:   
   2:        
   3: document.οnkeydοwn=keypage  
   4:   
   5: function keypage(e) {   
   6:        
   7: eevt=e?e:(window.event?window.event:null);    
   8:        
   9:     if (evt.keyCode==13) {   
  10:            
  11:         if (window.XMLHttpRequest) { // IE7 FF MO   
  12:             //alert(( evt ? evt.explicitOriginalTarget : null).tagName)   
  13:            
  14:             if(( evt ? evt.explicitOriginalTarget : null).tagName =="TEXTAREA"){   
  15:                 var obj = evt ? evt.explicitOriginalTarget : null;    
  16:                 alert("ID:="+obj.id)   
  17:            }   
  18:         } else { // IE6   
  19:             if(document.activeElement.type== "textarea") {   
  20:                     var obj = document.activeElement   
  21:                     alert("ID:="+obj.id)   
  22:             }   
  23:         }   
  24:     }   
  25: }
</ script > 
   7:   
   8:   
   9: </head>  
  10: <body>  
  11:        
  12:     <input  id="test1"type="text" >  
  13:     <br>  
  14:     <input id="test2" type="text" >  
  15:     <br>  
  16:     <input id="test3" type="button" >  
  17:     <br>  
  18:     <textarea id="test4"></textarea>  
  19:        
  20:        
  21: </body>  
  22: </html>

4.innerText

 

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

5.CSS “float” 属性

   1: 获取给定对象的特定 CSS 属性的基本语法是 object.style 属性，而且有连字符的属性要用骆驼命名法来代替。例如，获取一个 ID 为 “header” 的 div 的 background-color 属性，我们要用如下语法： 
   2:  
   3: document.getElementById(”header”).style.borderBottom= “1px solid #ccc”; 
   4:  
   5: 但是由于 “float” 是 JavaScript 的保留词，我们就无法使用 object.style.float 来获取 “float” 属性了。一下是我们在两种浏览器中的使用的方法： 
   6:  
   7: IE 语法： 
   8:  
   9: document.getElementById(”header”).style.styleFloat = “left”; 
  10:  
  11: Firefox 语法： 
  12:  
  13: document.getElementById(”header”).style.cssFloat = “left”;

6.元素的计算样式

   1: 通过使用上述的 object.style.property， JavaScript 可以很容易的获取和修改对象的设定 CSS 样式。但是这一语法的局限在于，它只能取得内联在 HTML 里的样式，或者直接使用 JavaScript 设定的样式。style 对象不能获取使用外部样式表设定的样式。为了获取对象的”计算样式”，我们使用以下代码：
   2:  
   3: IE 语法：
   4:  
   5: var myObject = document.getElementById(”header”);
   6: var myStyle = myObject.currentStyle.backgroundColor;
   7:  
   8: Firefox 语法：
   9:  
  10: var myObject = document.getElementById(”header”);
  11: var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);
  12: var myStyle = myComputedStyle.backgroundColor;
  13: 
7.获取元素的”class”属性 

   1: 类似于”float”属性的情况，这两种浏览器使用不同的 JavaScript 方法来获取这个属性。
   2:  
   3: IE 语法：
   4:  
   5: var myObject = document.getElementById(”header”);
   6: var myAttribute = myObject.getAttribute(”className”);
   7:  
   8: Firefox 语法：
   9:  
  10: var myObject = document.getElementById(”header”);
  11: var myAttribute = myObject.getAttribute(”class”);

8.获取 label 标签的 “for” 属性

   1: 和 3 一样，使用 JavaScript获取 label 的 “for” 属性也有不同语法。
   2:  
   3: IE 语法：
   4:  
   5: var myObject = document.getElementById(”myLabel”);
   6: var myAttribute = myObject.getAttribute(”htmlFor”);
   7:  
   8: Firefox 语法：
   9:  
  10: var myObject = document.getElementById(”myLabel”);
  11: var myAttribute = myObject.getAttribute(”for”);
  12:  
  13: 对于 setAtrribute 方法来说也是同样的语法。

9.获取光标位置

   1: 获取元素的光标位置比较少见，如果需要这么做，IE 和 Firefox 的语法也是不同的。这个示例代码是相当基础的，一般用作许多复杂事件处理的一部分，这里仅用来描述差异。需要注意的是，IE 中的结果和 Firefox 中是不同的，因此这个方法有些问题。通常，这个差异可以通过获取 “滚动位置” 来补偿 － 但那是另外一篇文章的课题了。
   2:  
   3: IE 语法：
   4:  
   5: var myCursorPosition = [0, 0];
   6: myCursorPosition[0] = event.clientX;
   7: myCursorPosition[1] = event.clientY;
   8:  
   9: Firefox 语法：
  10:  
  11: var myCursorPosition = [0, 0];
  12: myCursorPosition[0] = event.pageX;
  13: myCursorPosition[1] = event.pageY;
  14: 

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

   1: 有时需要找出浏览器的有效窗口空间的尺寸，一般成为”视窗”。
   2:  
   3: IE 语法：
   4:  
   5: var myBrowserSize = [0, 0];
   6: myBrowserSize[0] = document.documentElement.clientWidth;
   7: myBrowserSize[1] = document.documentElement.clientHeight;
   8:  
   9: Firefox 语法：
  10:  
  11: var myBrowserSize = [0, 0];
  12: myBrowserSize[0] = window.innerWidth;
  13: myBrowserSize[1] = window.innerHeight;
  14: 

11.Alpha 透明

   1: 嗯，这其实不是 JavaScript 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时，这就需要通过获取 CSS 的 alpha 设定来实现，一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码：
   2:  
   3: IE 语法：
   4:  
   5: #myElement {
   6: filter: alpha(opacity=50);
   7: }
   8:  
   9: Firefox 语法：
  10:  
  11: #myElement {
  12: opacity: 0.5;
  13: }
  14:  
  15: 要使用 JavaScript 获取这些值，需要使用 style 对象：
  16:  
  17: IE 语法：
  18:  
  19: var myObject = document.getElementById(”myElement”);
  20: myObject.style.filter = “alpha(opacity=80)”;
  21:  
  22: Firefox 语法：
  23:  
  24: var myObject = document.getElementById(”myElement”);
  25: myObject.style.opacity = “0.5″;
  26:  
  27: 当然，已经说到了，一般是在循环中间来改变 opcity/alpha，来创建动画效果，但这这是个简单的例子，只是为了明白地描述方法是如何实现地。

转载于:https://www.cnblogs.com/HeroBeast/archive/2009/06/04/1495987.html

dlwvvx1943
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js在IE与firefox的差异集锦
10-25
汇总了js在IE与Firefox环境下的差异，以及出现问题如何解决的方法，非常的详尽，也很实用，有需要的小伙伴自己拿走
IE和firefox浏览器的event事件兼容性汇总
09-05
总结来说，IE和Firefox对event事件的处理存在显著差异，开发者在编写JavaScript代码时，需要考虑这些差异并编写兼容性的代码。通常，遵循W3C标准的写法（如传入事件对象到处理函数，使用`event.target`和`event....
target,currentTarget,originalTarget,explicitOriginalTarget区别
闲谈
06-14 489
console.log(e.target); console.log(e.currentTarget); console.log(e.originalTarget); console.log(e.explicitOriginalTarget);     body上绑定的mousemove target:当前事件发生的对象    span currentTarget:事件冒泡到当前对...
“问题事件名称：BEX 故障模块名称：StackHash_9fba”的解决办法
热门推荐
08-15 4万+
调试程序的时候，APP Error，弹出这样的错误： 问题事件名称：BEX 故障模块名称：StackHash_9fba 解决办法： Project -> TestDLL2 Properties ->Configuration Properties -> Linker ->Advanced ->Data Execution Prevention(DEP) 改为Default。
js 兼容性问题
hexianlin168的博客
02-02 1692
js兼容ff 以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox 1. document.form.item问题 (1)现有问题：现有代码中存在许多 document.formName.item("itemName")这样的语句，不能在 MF 下运行(2)解决方法：改用 document.formName.elements["element...
Javascript的IE和Firefox兼容性汇总
lanse_my的专栏
08-20 646
以下以 IE 代替 Internet Explorer，以 MF 代替 Mozzila Firefox。 document.form.item 问题 现有问题： 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行 解决方法： 改用 document.formName.elements["elementName
JS的IE和Firefox兼容性汇总
ch_yangqin的专栏
11-29 354
1. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.formName.item("itemName") 这样的语句，不能在 MF 下运行 (2)解决方法： 改用 document.formName.elements["elementName"] (3)其它 参见 2 2. 集合类对象问题 (1)现有问题： 现有代码中许多集合类对象取用时使用
IE和火狐的兼容问题汇总
潜行的黑夜
08-07 398
1.     document.formName.item("itemName") 问题 说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"]; Firefox下,只能使用document.formName.elements["elementName"]. 解决方法:统
IE和火狐常见的css区别汇总
御膳房
02-28 321
<br /><br />1. Div居中问题 <br /> div设置 margin-left, margin-right 为 auto 时已经居中， <br /> IE 不行，IE需要设定body居中， <br /> 首先在父级元素定义text-algin: center; <br /> 这个的意思就是在父级元素内的内容居中。    <br />2.链接(a标签)的边框与背景<br /> a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换
JS IE和FF兼容性问题汇总
11-30
JavaScript（JS）在不同的浏览器，特别是Internet Explorer（IE）和Firefox（FF）之间存在一些兼容性问题，这主要是由于它们对DOM（文档对象模型）和事件处理方式的实现差异。以下是一些主要的问题及解决方案： 1. ...
js在ie和FireFox下兼容问题汇总
11-26
JavaScript 在不同浏览器之间的兼容性问题一直是开发者面临的重要挑战，尤其是IE和Firefox之间的差异。本文将详细探讨这些兼容性问题，并提供相应的解决方案。 1. `document.form.item` 问题： - 在IE中，可以通过...
IE和Mozilla的兼容性汇总event
12-12
而在Mozilla（包括Firefox）浏览器中，事件对象需要作为参数传递给事件处理函数，如`doIt(event)`。为了确保兼容性，我们需要在Mozilla环境中显式传递`event`对象。 2. **事件源的区别：`event.srcElement` vs. `...
Webkit简介以及工作流程
读心悦
07-10 310
WebKit是一个开源的浏览器引擎，最初由苹果公司基于KHTML（K Desktop Environment的HTML渲染引擎）开发，并广泛应用于Safari浏览器。随着时间的推移，WebKit也被其他多款浏览器和应用所采用，成为Web技术生态中的重要一员。WebKit的核心功能包括解析HTML、CSS、JavaScript等网页内容，并将其渲染为可视化的网页页面。它主要由WebCore（负责HTML解析、CSS样式计算和布局）和JavaScriptCore（负责JavaScript解释执行）两大部分组成。
vue引入sm-crypto通过sm4对文件进行加解密，用户输入密码
最新发布
cc1314_工作、学习有感
07-12 188
通过sm4对文件进行加解密，用户输入密码
vue2 、 vue3首屏优化，减少白屏时间
m0_56104994的博客
07-09 309
vue2、vue3首屏优化,减少白屏时间
前端 JS 经典：迭代器
weixin_64684095的博客
07-12 164
如果在最后一个值返回后再调用 next()方法，那么返回的对象中属性 done 的值为 true，属性 value 则包含迭代器最终返回的值（如果没有相关数据则返回 undefined）。可迭代对象具有 Symbol.iterator 属性，通过指定的函数可以返回一个作用于附属对象的迭代器。JavaScript 中有一些内置的可迭代对象，如数组、字符串、集合（Set）、映射（Map）等，它们都具有默认的迭代器。在 JavaScript 中，迭代器是一个对象，它定义了一个序列，并在终止时可能返回一个返回值。
CSS兼容IE和Firefox的技巧集合
10-27
这些技巧可以帮助网页设计师更好地处理CSS兼容IE和Firefox的问题，确保网站在不同浏览器上的正常显示。如果学习并掌握了这些技巧，就能够更加轻松地应对不同浏览器的兼容性问题，提高网页的用户体验。因此，对于有关...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值