天下第二博

Tian Xia The Second BO
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Ajax跨浏览器的支持

Posted on 2007-04-26 09:12  Nuke'Blog  阅读(560)  评论(1编辑  收藏  举报
1、向表中追加行
兼容IE和其他浏览器的方式
<table>
 <tbody id="myTableBody"></tbody>
</table>
这样就可以通过appendChild的方式添加内容,如下内容:
var td=document.createElement("td").appendChild(document.createTextNode("foo"));
var tr=document.createElement("tr").appendChild(td);
document.getElementById("myTableBody").appendChild(tr);
2、通过Javascript设置元素样式(style)
兼容IE和其他浏览器的方式
var spanElement=document.getElementById("mySpan");
spanElement.setAttribute("style","font-weight:bold;color:red;");
spanElement.style.cssText="font-weight:bold;color:red;";
//前面一行的setAttribute的方式在除IE的浏览器外的支持,而后面一行则在IE中得到支持
3、设置元素的class属性
var element=document.getElementById("myElement");
element.setAttribute("class","styleClass");
element.setAttribute("className","styleClass");
//后一行也是为了兼容IE的方式
4、创建输入元素(单行文本、按钮、复选框、单选按钮)
创建select和textarea的方式是直接使用document.createElement传递元素的标记名的方式。
单行文本框、按钮、复选框和单选钮都必须要使用document.createElement然后使用setAttribute的方法来设置type的属性。但是需要注意的是,确保创建元素后设置其所有的属性,尤其是type属性,然后再将它添加到父元素中。例如:
var button=document.createElement("input");
button.setAttribute("type","button");
document.getElementById("element").appendChild(button);
规则是:先设置属性,然后添加到父节点中
5、向元素增加事件处理程序
不能够使用setAtrribute来设置onclick等的属性的方式来设置事件处理程序,因为在IE当中这样是不兼容的。通过以下的方式来添加事件处理程序则可以得到大多数浏览器的兼容:
var formElement=document.getElementById("formElement");
formElement.onclick=function(){ doFunction();};
6、创建单选按钮
可惜的是没有办法创建兼容IE和其他浏览器的代码,只好通过判断浏览器的类型然后分别创建代码。document.uniqueID在IE当中可以被识别,所以可以通过它来检测浏览器类型,然后分别创建改单选按钮。
if(document.uniqueID){
 //IE
 var radioButton=document.createElement("<input type='radio' name='radioButton' value='checked'>");
}else{
 //OTHER BROWSER
 var radioButtton=document.createElement("input");
 radioButton.setAttribute("type","radio");
 radioButton.setAttribute("name","radioButton");
 radioButton.setAttribute("value","checked");
}