JS浏览器兼容性处理

1 篇文章 0 订阅

1. 向表中追加行
这是IE和Firefox,Safari,Opera都支持的代码
var cell = documentcreateElement("td").appendChild(document.createTextNode("foo")); 
var row = document.createElement("tr").appendChild(cell); 
document.getElementById("MyTableBoyd").appendChild(row); 
或者:在TR的父节点添加TBODY。(注:在IE中,利用DOM动态添加表格的行时,在TR的上一层必须添加TBODY,否则动态添加之后无法显示出来)

2. 通过JAVASCRIPT设置元素的样式
var spanElement = document.getElementById("myspan"); 
//spanElement.setAttribute("style","font-weight:bold;color:red"); //IE之外的浏览器
spanElement.style.cssText="font-weight:bold;color:red"; //IE的方法cssText不是标准属性,但得到IE支持

3. IE和FF在添加Option兼容操作,这里直接贴出本人的代码(注:FF支持直接将Option列表以innerHTML形式嵌入到select节点,但IE不支持)
function removeAllOptions(select_id){
    var com=document.getElementById(select_id);
    var len=com.options.length;
    for(var i=0;i<len;i++){
        com.remove(0);
    }
}
function addOption(e_select,value,text){
   var oOption = document.createElement("option");
   e_select.options.add(oOption);
   if(text!=null){
      var text_node=document.createTextNode(text);
      oOption.appendChild(text_node);
   }
   if(value!=null){
      oOption.value = value;
   }
}

4. 创建输入元素(通用代码)
var button = document.createElement("input"); 
button.setAttribute("type","button"); 
document.getElementById("form").appendChild(button);

5. 向输入元素增加事件处理程序(通用代码)
var element = document.getElementById("ee"); 
element.οnclick=function(){todo();};

6. 创建单选按钮
var ration = document.createElement("<input type='radio' name='radionsss' value='checked'>”);//ie 
//非ie创建方法
vat radion = document.createElement("input"); 
radion .setAttribute("type","radio"); 
radion.setAttribute("name","radionsss"); 
radion.setAttribute("value","checked");




以下为IE与Firefox区别:

1:innerText
IE支持,FIREFOX不支持
解决办法:用innerHTML,2种浏览器都识别innerHTML

2:document.createElement
document.appendChild
在往表里插入行时
FIREFOX支持,IE不支持
解决办法:把行插入到TBODY中,不要直接插入到表

3:setAttribute('style','color:red;')
FIREFOX支持(除了IE,现在所有浏览器都支持),IE不支持
解决办法:不用setAttribute('style','color:red')
而用object.style.cssText = 'color:red;'(这写法也有例外)
最好的办法是上面种方法都用上,万无一失 ^_^

4: class
setAttribute('class','styleClass')
FIREFOX支持,IE不支持(指定属性名为CLASS,IE不会设置元素的CLASS属性,相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性)
解决办法:
setAttribute('class','styleClass')
setAttribute('className','styleClass')
2种都用上(注:IE和FF都支持object.className)

5: 用setAttribute设置事件
var obj = document.getElementById('objId');
obj.setAttribute('onclick','funcitonname();');
FIREFOX支持,IE不支持
解决办法:
IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数
如下:
var obj = document.getElementById('objId');
obj.οnclick=function(){fucntionname();};
这种方法所有浏览器都支持

6:建立单选钮
IE以外的浏览器
var rdo = document.createElement('input');
rdo.setAttribute('type','radio');
rdo.setAttribute('name','radiobtn');
rdo.setAttribute('value','checked');

IE:
var rdo =document.createElement("<input type='radio' name='radiobtn' value='checked'>");
解决办法:
这一点区别和前面的都不一样。这次完全不同,所以找不到共同的办法来解决,那么只有IF-ELSE了

万幸的是,IE可以识别出document的uniqueID属性,别的浏览器都不可以识别出这一属性。问题解决。


注意:以上内容参考自http://www.cnblogs.com/huqingyu/archive/2008/02/16/1070841.html



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值