做兼容注意：
一如果两个都是属性，用逻辑||做兼容
二如果有一个是方法 用三目运算符做兼容
三多个属性或方法封装函数做兼容
一：谷歌浏览器和火狐浏览器鼠标滚动条兼容
- 1.document.documentElement.scrollTop || document.body.scrollTop
- document.documentElement.scrollLeft || document.body.scrollLeft
二:IE低版本和标准浏览器获取className的兼容
function getgetAttribute(obj){
if(obj.getAttribute("class")==null){
return obj.getAttribute("className");
}else{
return obj.getAttribute("class");
}
}
三 过滤空白文本
三种方式忽略空白文本节点
function noSpace(node){
var arr = [];
//遍历所有的子节点
for(var i = 0; i < node.length; i++){
//判断节点类型是文本且文本中包含空白
if(node[i].nodeType == 3 && /^\s+$/.test(node[i].nodeValue)){
continue;
}else{
arr.push(node[i]); //将非空白节点添加到新的数组中
}
}
return arr;
}
- 删除空白文本节点
function removeSpace(node){
for(var i = 0; i < node.length; i++){
//判断节点类型是文本且文本中包含空白
if(node[i].nodeType == 3 && /^\s+$/.test(node[i].nodeValue)){
//移除文本节点中的空白
node[i].parentNode.removeChild(node[i]);
}
}
return node;
}
常用 重要//3.移除空白文本节点
function removeSpace(node){ //node :父节点
var childs = node.childNodes; //获取所有子节点
for(var i = 0;i < childs.length;i ++){
if(childs[i].nodeType === 3 && /^\s+$/.test(childs[i].nodeValue)){
node.removeChild(childs[i]);
}
}
return node;
}
四 获取非行内样式兼容
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
三目也可以
function getStyle(obj,attr){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,true)[attr];
}
五 function(){
var e= evt||window.event;
}
六function getButton(evt){
var e = evt || window.event; //获取事件对象
if(evt){ //通过获取事件对象的方式，判断是否为标准浏览器
return e.button; //直接键值
}else if(window.event){ //通过获取事件对象的方式，判断是否为IE
//键值向标准靠拢（返回标准键值）
switch(e.button){
case 1 : return 0;
case 4 : return 1;
case 2 : return 2;
}
}
}
七 document.onkeypress =function(evt){
Var e=evt || window.event;
Var keyValue = e.keyCode || e.charCode || e.which;
Alert(keyValue);
}
八 阻止事件冒泡兼容
e.stopPropagation ?e.stopPropagation():e.cancelBubble=true;
九 阻止a标签默认链接
e.preventDefault ? e.preventDefault() : e.returnValue = false;
十添加事件监听的兼容
function addEventListener(obj,event,fn,boo){
if(obj.addEventListener){
obj.addEventListener(event,fn,boo);
}else{
obj.attachEvent("on" + event,fn);
}
}
十一移出事件监听的兼容
function removeEventListener(obj,evt,fn,boo){
if(obj.removeEventListener){
obj.removeEventListener(evt,fn,boo);
}else{
obj.detachEvent("on" + evt,fn);
}
}
后续还会有 暂时总结一点 当然兼容写法多样 也可以用三种方式里的其他写