用js跨浏览器追加innerHtml,开拓跨浏览器javascript常见注意事项

对此javascript的开荒人士来讲,多浏览器的补助性,一向是个难点,每一趟都要经过测量检验,八个浏览器,技术使用上边一些常见的一些注意事项。一、向表追加行
在既往接纳Ajax的经历中,你很可能会接纳JavaScript向现存的表中追加行,或许初叶创立包括表行的新表。document.createElement和document.appendChiid方法能够使那很轻巧做到,只需接纳document.createElement创造表单元格,再利用document.app-endChild方法将这几个表单元格扩大到表行。接下来的编排步骤是使用document.append-
Child将表行增添到表中。
在Firefox、Safari和Opera等方今浏览器中,那样做是足以的。不过,假如利用的是lE,表行则不会在表中出现。更倒霉的是,IE以至不抛出其它错误,或对表行确实已经增添到表中却不会议及展览示出来的难点提供其余线索。
在这种情景下,消除办法很简短。IE允许将tr成分扩张到tbody成分,而不是直接扩展到table成分。譬如,假诺定义一个空表如下:

1、         
向表中追加行

向那一个表中增添行的不错做法是把行增添到表体,而不是充实到表,如下所示:
var
cell=document.createElement(“td”).appendChild(document.createTextNode(“foo”));
vat row=document.createElement(“tr”).appendChild(cell);
document.getElementByld(“myTableBody”).appendChiid(row);
辛运的是,这种方式在颇具当前浏览器上都能用,也包括IE。假诺你养成习贯,总是采纳表中的表体,就无须顾忌那个难点了。
二 通过javascript设置成分的体裁
利用Ajax手艺,开垦人士创设的Web应用能够与服务器无缝地通讯,而没有供给完全页面刷新。但对此A1ax诉求,是不会见世这种页面闪烁的,所以用户可能不掌握页面上有些数据现已更新。你大概想修改某个因素的体裁,提示页面上一些数额现已更动。比方,如果期货(Futures)的价格一度由此Ajax诉求得到了无缝更新,能够加亮呈现那支证券的名字。
能够因而JavaScript使用要素的setAttribute方法设置成分的体制。举例,要把span成分中的文本修改为运用深藕红粗体展现.能够行使setAttribute疗法之类:
var spanElement = document.getElementById(“mySpan”);
spanElement.setAttribute(“style”, “font-weight:bold; color:red;”);
除了IE、这种措施在近些日子别的浏览器上都以实用的。对于IE,搞定办法是运用要素style对象的cssText属性来安装所需的样式.尽管这么些天性不是正统的,但获得了广阔扶助,如下所示:
var spanElement = document.getElementById(“mySpan”);
spanElement.style.cssText = “font-weight:bold; color:red;”;
这种艺术在IE和诸多别样浏览器上部能很好地劳作,唯有Opera除此之外。为了让代码在装有当前浏览器上都可移植,能够而且使用那三种办法,也正是既使用setAttribute方法,也运用要素style对象的cssText属性,如下所示:
var spanElement = document.getElementById(“mySpan”);
spanElement.setAttribute(“style”, “font-weight:bold; color:red;”);
spanElement.style.cssText = “font-weight:bold; color:red;”;
那样一来,在时下全数浏览器上都能平常地安装成分的体制了。
三、设置成分的class属性
读过前一节后,精通到能够通过JavaScript来设置成分的内联样式,你或者影响地认为,轻易地安装无素的class属件应该是最轻便的了。缺憾的是,并不这样。与安装成分内联样式类似,通过JavaScript动态地设置成分的class属性时也设有有的特异性。
你大概早已猜到了,IE是时下浏览器中的三个异物,但是化解方法倒也特别轻易。使用Firefox和Safari之类的浏览器时,能够应用要素的setAttribute方法来安装冗素的class属性,如下所示:
var element = document.getElementById(“myElement”);
element.setAttribute(“class”, “styleC1ass”);
奇异的是,若是运用setAttribute方法,并点名属性名字为class,IE并不会设置成分的class属性。相反,只使用setAttribute方法时IE会自身识别className属性。对于这种景色,完备的化解情势是:使用要素的setAttribute方法时,将class和className都用作属性名,如下所不:
var element = document.getElementById(“myElement”);
element.setAttribute(“class”, “styleC1ass”);
element.setAttribute(“className”, “styleC1ass”);
当前当先四分之二浏览器都会动用class属性名而忽略className,IE则正好相反。
四、成立输入成分输入成分为用户提供了与页面交互的手法。HTML本人有一组简单的输入成分,包涵单行文本框、多行文本框、选取框、按键、复选框和单选钮。你恐怕想利用JavaScfipt动态地刨建这样一些输入成分作为Ajax实现的一部分。
单行文本框、按键、复选框和单选钮都得以创建为输入成分,只是type属性的值有所差异。选取框和文本区有谈得来故意的标识。通过JavaScript动态地创立输入成分很简短(但单选钮除了这几个之外,这在“刨建单选钮”一节再做表明),只要依据一些总结的平整就行。使用document.createElement方法能够很轻易地创建选拔框和文本区,只需向document.cr
eateElement传递成分的标识名,如select或textarea。
单行文本框、开关、复选框和单选钮稍难有的,因为它们皆有同样的成分名input,只是type属性的值不相同。所以,要开创这个因素,不止必要利用document.createElement方法,前边还要调用成分的setAttribute方法来安装type属性的值。那并简单,但的确要多加一行代码.
思考在何地把新创立的输入成分扩展到其父成分中,必须注意document.createElement和setAttribute语句的相继。在某个浏览器中,唯有刨建了成分,而且不易地安装了type属性时,于会把新创制的要素增添到其父成分中。比如,以下代码段存有些浏览器中也许有意外的表现:
document.getElementById(“formElement”).appendChild(button);
button.setAttribute(“type”, “button”);
为了制止不测的一言一动,要保障刨建输入成分后安装其兼具属性,特别是type属性,然后再把它扩大到父成分中,如下:
var button = document.createElement(“input”):
button.setAttribute(“type”, “button”);
document.getElementById(“formElement”).appendChild(button);
遵从那几个简单的平整,有助于排除之后或者出现的一些吃力检查判断的主题素材。 五
向输入成分扩张业务管理程序
向输入成分扩充事件管理程序应该与利用setAttribute方法并点名事件管理程序的名字和所需函数管理程序的名字同样轻巧,对吧?错。设置成分的事件管理程序的行业内部做法是选用要素的setAttribute方法,它以事件名作为属性名,并把函数管理程序作为质量值.如下所示:
var formElement = document,getElementById(“formElement”);
formElement.setAttribute(“onclick”, “doFoo();”);
除了IE上面的代码在具备当前浏览器中都能源办公室事。假如在IE中利用JavaScfipt设置元素的事件管理程序,必须对成分运用点记法来援引所需的事件管理程序,非把它赋为佚名函数,那么些无名氏函数必要调用所需的事什管理程序,如下所示:
var formElement = document,getElementById(“formElement”);
formElement.onclick = function() { doFoo(); };
注意,是哪些通过点记法从formElement援用onclick事件管理程序。onclick事什管理程序赋为一个无名氏函数,那一个无名氏函数只是调用了所需的事件处理程序.在那个事例中事件管理程序便是doFoo。
幸运的是,这种本事取得了IE和享有其余当前浏览器的扶助.所以完全能够经过JavaScfipt动态地设置表单成分的事件管理程序。
六、创制单选按钮最棒的接连留在末了。通过JavaScript动态地开创单选钮是很费力的,因为IE中开创单选钮的艺术与其余浏览器所用的艺术暗淡无光。
除了IE,当前颇具别的浏览器都同意接纳以下情势创造单选钮(这一个措施应该能想赢得):
var radioButton = document.createElement(“input”);
radioButton.setAttribute(“type”, “radlo”);
radioButton.setAttribute(“name”, “radioButton”);
radioButton.setAttribute(“value”, “checked”);
那样就能够在除IE以外的有所当前浏览器中开创单选选钮,而且能健康专门的工作。在lE中,单选钮确实会来得出来.但是无力回天将其当选,因为点击单选钮行不按我们预想得那样使之选中。在IE中,创造单选钮的不二法门与别的浏览器所用的不二秘诀完全两样,而且一贯不合作。对于近期创设的单选钮,在IE中得以如下建构:
var radioButton = decument.createElement(“”);
幸好,IE中确实能够经过JavaScript动态地成立单选钮,只可是难些,而且与别的浏览器不协作。
怎样打败那个范围呢?答案很简短,那正是内需某种浏览器嗅探(browser-sniffing)机制,使得在创制单选钮时脚本就能够分晓该应用哪个方法。幸运的是,你绝不检查大批量不及的浏览器。假若只行使当代浏览器,脚本只须求在IE和别的浏览器间开始展览区分就行了。
IE能辨识著名叫uniqueID的document对象的专项使用属性,名称为uniqueID。IE也是惟一能分辨那个性子的浏览器,所以uniqueID很符合用来规定脚本是否在IE中运作。
使用docurnent.uniqueID属性来分明脚本在哪个浏览器中运维时,能够整合IE特定的法门和正式极其的法门,这就能够取得以下代码:
if(document.uniqueID) { //Internet Explorer var radioButton =
decument.createElement(“”); } else { //Standards Compliant var
radioButton = document.createElement(“input”);
radioButton.setAttribute(“type”, “radlo”);
radioButton.setAttribute(“name”, “radioButton”);
radioButton.setAttribute(“value”, “checked”); }

定义table时行使tbody成分,以担保包含IE在内的装有浏览器可用

 

例:定义如下多个空表

 

<table
id=”myTable”>

 迎接大家一时光到小编的小站去看望

      <tbody
id=”myTableBody”></tbody>

www.joyoustore.com

</table>

 

向那些表中扩展行的不易做法是,把行扩展到表体,而不是增加到表。

 

用js跨浏览器追加innerHtml,开拓跨浏览器javascript常见注意事项。Var cell =
document.createElement(“td”).appendChild(document.createTextNode(“foo”));


Var row =
document.createElement(“tr”).appendChild(cell);

Document.getElementById(“myTableBody”).appendChild(row);

*IE中须求先成立行,再创立列,再创制内容

2、         
设置元素的体裁

Var spanElement
= document.getElementById(“mySpan”);

//上边写法保障出IE外,全数浏览器可用

spanElement.setAttribute(“style”,”font-weight:bold;color:red;”);

//下面的写法保险IE可用

spanElement.style.cssText=”font-weight:bold;color:red;”;

3、         
设置成分的class属性

Var element =
document.getElementById(“myElement”);

//上边包车型大巴写法保障除IE外,全体浏览器可用

Element.setAttribute(“class”,”styleClass”);

//上边写法保险IE可用

Element.setAttribute(“className”,”styleClass”);

4、         
创制输入成分

Var button =
document.createElement(“input”);

//单行文本框、复选框、单选框、单选钮、开关供给此属性差别

Button.setAttribute(“type”,”button”);

Document.getElementById(“formElement”).appendChild(button);

5、         
向输入成分扩充事件管理程序

Var
formElement=document.getElementById(“formElement”);

//全数浏览器可用

formElement.onclick=function(){doFoo();};

美高梅开户网址,//除IE外,全部浏览器可用

formElement.setAttribute(“onclick”,”doFoo();”);

6、         
创造单选钮

If(document.uniqueID){

      //Internet
Explorer

      Var
radioButton=document.createElement(“<input type=’radio’
name=’radioButton’ value=’checked’>”);

}else{

     
//Standards Compliant

      Var
radioButton=document.createElement(“input”);

     
radioButton.setAttribute(“type”,”radio”);

     
radioButton.setAttribute(“name”,”radioButton”);

     
radioButton.setAttribute(“value”,”checked”);

}

7、         
insertRow,insertCell,deleteRow

在IE中,table.insertRow()若无一点名参数,则在报表前面增加行,暗中认可参数位-1;倘使在Firefox中,则必定要加参数,如:insertRow(-1)。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图