引用 js在IE与FF之间的区别详细解析_javascript技巧

js调试工具推荐firefox的firebug插件

能够给js设置断点执行

能够运行时修改css样式

查看dom模型等

☆IE8自带的developerbar也很不错

☆打开firefox所有js警告:
在地址栏里录入:about:config
双击,设置javascriptoptionrestict打开为true能够看到很多警告,利于纠错

☆IE->firefoxjavascript类

△document.all("id")->document.getElementById("id")
并且控件尽量用id,而不是name标识

提示:
如果控件只有name,没有id,用getElementById时:
IE:也可以找到对象
FF:返回NULL

△获得form里某个元素的方法
elForm.elements['name'];

△取集合元素时,ie支持[],()2种写法,但是ff仅支持[],如:
table.rows(5).cells(0)
改为:
table.rows[5].cells[0]

△判断对象是否是object的方法应该为
if(typeof对象变量=="object")
而不是if(对象变量=="[object]")

△eval(对象名称)->document.getElementById
FF支持eval函数

△通过id直接调用对象
对象id.value=""
改为
document.getElementById("name").value=""

△obj.insertAdjacentElement("beforeBegin",objText);

改为用
obj.parentNode.insertBefore(objText,obj);

△FF的createElement不支持HTML代码

用document.write(esHTML);

或者创建元素后再设置属性,对input元素来说,需要先设置type再加入到dom里
varobj=createElement("input");
obj.type="checkbox";

varobj2=document.getElementById("id2");
obj2.parentNode.insertBefore(obj,obj2);

如果是直接插入html代码,则可以考虑用
createContextualFragment

△innerText->textContent

△对象名称中的$不能识别,建议改为_
objName="t1$spin"
改为
objName="t1_spin"

△FF里设置Attribute为某个对象,然后再取出来,这时候对象的属性都丢失了?
objText.setAttribute("obj",obj);

alert(obj.id)//正确的名字
obj=objText.getAttribute("obj");
alert(obj.id)//null

在IE下没有问题,FF对setAttribute来说,第2个参数都是字符串型的!!!
所以如果第2个参数是对象时,相当于调用对象的toString()方法了

解决的方法是用下面的调用方式:
objText.dropdown_select=obj;
obj=objText.dropdown_select

△className->class
FF下用class代替IE下的className
由于class是关键字,所以需要用setAttribute/getAttribute才行
setAttribute("class","css样式名称");

△在html里定义的属性,必须用getAttribute才行
<tdid="TD1"isOBJ="true">

获取时:
document.getElementByID("TD1").isOBJ总返回undefined,IE下是可以的

应该用:
document.getElementByID("TD1").getAttribute("isOBJ")

△FF里select控件不再是:总是在顶端显示
所以可能需要设置控件的zIndex
IE里覆盖select控件的方法是,用ifame

△对于if(vars==undefined)下面的值用于判断是等同的
undefined
null
false
0

△如果FF调用obj.focus();报错,请尝试改为:
window.setTimeout(function(){obj.focus();},20);

△FF下,keyCode是只读的,那把回车转换为tab怎么办?在录入时进行键值转换怎么办??

变通的方法是:
1.回车跳转->自己写跳转处理代码.
遍历dom里所有的元素,找到当前元素的下一个能够设置焦点的元素,给其设置焦点

2.在能够录入的控件里,
把选中的部分替换为新录入的内容:vartext=String.fromCharCode(event.keyCode);
同时阻止按键事件上传,调用:event.preventDefault()

△<button>会被firefox解释为提交form或者刷新页面???
需要写标准<buttontype="button">
或者在onclick="原函数调用();returnfalse;"

△在firefox里,document.onfocus里获得不到实际获得焦点的控件?
为什么document.keydown可以呢?

△children->childNodes

△sytle.pixelHeight->style.height

△判断函数或者变量是否存在
if(!("varName"inwindow))varVarName=1;

△document.body.clientWidth

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN">

如果html包含上面的语句,则应该用下面的方法获取
document.documentElement.clientWidth

△window.createPopup

FF不支持

△document.body.onresize

FF不支持

用window.onresize

注意,页面打开时并不会触发onresize事件?需要在onload里也调用一次才行

△box模型的问题

IE下默认的是content-box为了统一,可用设置:

div,td{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;}

也可用在文档头加入:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

但是对IE旧代码影响较大

△注册事件

IE:attachEvent

FF:addEventListener("blur",myBlur,false);

第1个参数事件名称不需要带"on"

第3个参数false代表事件传递从事件对象沿dom树往body方向传

△触发事件

IE:obj.fireEvent("onclick");

FF:

vare=document.createEvent("Events");

e.initEvent("click",true,false);

element.dispatchEvent(event)

△在事件处理函数中获得对象句柄

varoThis=this;

obj.onfocus=function(evt){

oThis.doOnFocus(evt);

}

△统一事件处理框架代码

doOnFocus(evt){

evt=evt||window.event;

varel=evt.target||evt.srcElement;

//后续处理

}

△FF不支持onpropertychange事件

但是FF里可以定义属性的setter方法,如下面的:

HTMLElement.prototype.__defineSetter__("readOnly",function(readOnly){

//构造虚拟的event对象

varevt=[];

evt["target"]=this;

evt["propertyName"]='readOnly'

//onpropertychange函数需要定义evt参数,参考统一事件处理框架代码

if(this.onpropertychange)this.onpropertychange(evt);

});

☆IE->firefoxcss类

△cursor:hand->cursor:pointer

△expressionfirefox不支持

在IE下expression也非常消耗CPU,所以不应该使用!!

为了达到较好的效果,应该建立自己的expressiontojavascript的处理函数

这样在IE和FF里就都能用了.

△FILTERfirefox不支持

filter:Alpha(Opacity=50);

替换为

-moz-opacity:0.5;

△text-overflow

不支持

△transparent

firefox下obj.setAttribute("bgColor","#ffffff")只支持颜色

必须用obj.style.backgroundColor="transparent"才行

△FF下text控件高度与IE不同,统一一下

input[type=text]{

height:20px;

}

注意input与[之间不能有空格!

△font在IE里不能对body和td等起作用,FF可以

统一用font-family

时间: 2024-02-19 10:21:12

引用 js在IE与FF之间的区别详细解析_javascript技巧的相关文章

JS事件在IE与FF中的区别详细解析_javascript技巧

之道的易搜项目中的搜索分类是通过JS动态生成的,每个生成的元素都要动态的添加属性.事件.其中,添加属性可以采用赋值的方式,这对IE和FF都是适用的.比如:      var element = document.createElement('select');      element.id = "myselect"; 上面的语句在IE和FF中都会有同样的效果,并且运行正常.但是我们创建的元素,大部分是要给其动态添加事件的,显然,我们不能和添加属性一样,直接在后面打个dot,然后写个事

js判断undefined类型,undefined,null, 的区别详细解析_javascript技巧

js判断undefined类型 今天使用showModalDialog打开页面,返回值时.当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined所以自作聪明判断   var reValue=window.showModalDialog("","","");   if (reValue== undefined){  alert("undefined"); } 发现判断不出来,最后查了下资料要用typeof 方

js中opener与parent的区别详细解析_javascript技巧

opener即谁打开我的,比如A页面利用window.open弹出了B页面窗口,那么A页面所在窗口就是B页面的opener,在B页面通过opener对象可以访问A页面. parent表示父窗口,比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent.在JS中,window.opener只是对弹出窗口的母窗口的一个引用.比如:a.html中,通过点击按钮等方式window.open出一个新的窗口b.html.那么在b.html中,就可以通过window.o

JS在IE和FF下attachEvent,addEventListener学习笔记_javascript技巧

对象名.addEventListener("事件名(不带ON)",函数名,true/false);(FF下) 对象名.attachEvent("事件名",函数名);(IE下) 说明: 事件名称,要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on". 函数名,记住不要跟括号最后一个参数是个布尔值,表示该事件的

JS+XML 省份和城市之间的联动实现代码_javascript技巧

xml:Provinces.xml 复制代码 代码如下: <?xml version="1.0"?> <Root> <Province ID="1" Name="安徽"> <City ID="1">安庆市</City> <City ID="2">蚌埠市</City> <City ID="3">

js鼠标及对象坐标控制属性详细解析_javascript技巧

offsetTop获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置. offsetLeft获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置. offsetHeight获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度.IE.Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框.NS.FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientH

js中window.open()的所有参数详细解析_javascript技巧

[1.最基本的弹出窗口代码]  复制代码 代码如下:  <SCRIPT LANGUAGE="javascript">  <!--  window.open ('page.html')  -->  </SCRIPT>    因为着是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间.<!-- 和 -->是对一些版

js判断undefined类型,undefined,null的区别详细解析

 本篇文章主要是对js判断undefined类型,undefined,null,NaN的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 js判断undefined类型   今天使用showModalDialog打开页面,返回值时.当打开的页面点击关闭按钮或直接点浏览器上的关闭则返回值是undefined 所以自作聪明判断      var reValue=window.showModalDialog("","",""); 

JS中的构造函数详细解析_javascript技巧

在JavaScript中,任何合法的函数都可以作为对象的构造函数,这既包括系统内置函数,也包括用户自己定义的函数.一旦函数被作为构造函数执行,它内部的this属性将引用函数本身. 通常来说,构造函数没有返回值,它们只是初始化由this指针传递进来的对象,并且什么也不返回.如果一个函数有返回值,被返回的对象就成了new表达式的值.从形式上看,一个函数被作为构造函数还是普通函数执行的唯一区别,是否用new运算符. 上面的描述事实上有着更为精确的含义,这要把函数如果有返回值的情况分为函数的返回值是引用