逃离IE日记。

第一天:

场景1修改:

同级框架互访

IE支持window.parent.{frame名} 这种方式来访问兄弟frame的内容,如:

父页面有以下内容:


我在brother2页面下访问frame名为brother1的内容:

//IE下的写法当时如蜜糖,现在对改版的我们如毒药
window.parent.brother1.document

//现代浏览器的写法
window.parent.frames['brother1'].document

第二天:

场景1修改:

反选checkbox中已经选择的选项。

IE可以直接通过checkbox的name来直接获取同名checkox

代码如下:

123
456
//实现反选功能
//IE可以在window对象下直接找到name相关的的控件,IE语法糖

for(var i=0; i< c_group.length; i++) {
    window.c_group[i].checked = !window.c_group[i].checked;

}


//现代浏览器通过querySelectorAll来查找
let list =document.querySelectorAll('input[name=c_group]:checked');
Array.prototype.forEach.call(list ,function(val){
    val.checked = !val.checked;
})

第三天:

场景1修改:

获取checkbox中已经选择的值。

IE可以直接通过checkbox的value来直接获取同名checkox的

代码如下:

123
456
//实现取值功能
//IE可以在window对象下通过同名的name返回一个元素列表,在这些列表来直接访问value来取值,IE语法糖
var value='';
for(var i=0;i< window.c_group.length; i++){
   value += window.c_group[i].value + ',';
}
if(value != ''){
  value = value.substr(0,value.length-1);
}



//现代浏览器通过querySelectorAll来查找
let list =document.querySelectorAll('input[name=c_group]:checked');
let value= Array.prototype.map.call(list ,function(val){
    return val.value;
}).join(',')

 第四天:

场景1修改:

创建元素。

IE可以直接通过完整的html标签内容来创建元素,但现代浏览器会直接报错

代码如下:

//IE的代码,创建复选框元素
 var o_checkbox = document.createElement('');


//现代浏览器执行上面的代码会直接报错,createElement的参数只能填元素名称
  var ocheckbox = document.createElement('input');
  ocheckbox.setAttribute("type", "checkbox");  
  ocheckbox.setAttribute("name", "c_group");  
  ocheckbox.setAttribute("value", "123");  

场景2修改:

innerHTML的设置。

IE可以直接通过setAttribute方法来设置元素的内部HTML内容,但现代浏览器这样做是创建元素的属性。

代码如下:

//IE代码,通过setAttribute方法来设置td内部的html内容,可以保持代码一致
var td = document.createElement("td");
td.setAttribute("innerHTML",'张三');	
td.setAttribute("bgColor","#FFFFFF");	


//现代浏览器,直接使用innerHTML属性直接赋值。
var td = document.createElement("td");
 td.innerHTML = '张三';	
 td.setAttribute("bgColor","#FFFFFF");	

你可能感兴趣的:(前端)