Detailed analysis of the difference between js in IE and FF_javascript skills

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才行

获取时:
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()

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

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

△children->childNodes

△sytle.pixelHeight->style.height

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

△document.body.clientWidth

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

△window.createPopup

FF does not support

△document.body.onresize

FF does not support

Use window.onresize

Note that the onresize event will not be triggered when the page is opened? It needs to be called once in onload

Problems with the △box model

The default under IE is content-box for unification, available settings:

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

can also be added to the document header:

But it has a greater impact on the old IE code

△Register event

IE:attachEvent

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

The first parameter event name does not need to contain "on"

The third parameter false represents that the event is passed from the event object along the dom tree to the body direction

△Trigger event

IE:obj.fireEvent("onclick");

FF:

vare=document.createEvent("Events");

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

element.dispatchEvent(event)

△ Obtain the object handle in the event handler function

varoThis=this;

obj.onfocus=function(evt){

oThis.doOnFocus(evt);

}

△Unified event processing framework code

doOnFocus(evt){

evt=evt||window.event;

varel=evt.target||evt.srcElement;

//Follow-up processing

}

△FF does not support onpropertychange event

But you can define the setter method of attributes in FF, as shown below:

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

//Construct virtual event object

varevt=[];

evt["target"]=this;

evt["propertyName"]='readOnly'

//The onpropertychange function needs to define the evt parameter, refer to the unified event processing framework code

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

});

☆IE->firefoxcss class

△cursor:hand->cursor:pointer

△expressionfirefox does not support

Expression also consumes a lot of CPU under IE, so it should not be used!!

In order to achieve better results, you should create your own expressiontojavascript processing function

This way it can be used in both IE and FF.

△FILTER firefox does not support

filter:Alpha(Opacity=50);

Replace

with

-moz-opacity:0.5;

△text-overflow

Not supported

△transparent

obj.setAttribute("bgColor","#ffffff") under firefox only supports color

Must use obj.style.backgroundColor="transparent"

△The height of the text control in FF is different from that in IE, please unify it

input[type=text]{

height:20px;

}

Note that there cannot be a space between input and [!

△font cannot work on body and td in IE, but FF can

Uniformly use font-family