1 获取滚动条兼容 var height = document.documentElement.scrollTop||document.body.scrollTop; 2 获取可是区域兼容 var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0; var clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; 3 获取计算后的样式兼容函数 function computedStyle(obj , val) { // 检测是否认识window if(window.getComputedStyle){ // 高级浏览器 // 中括号属性名都可以,人为定义使用短横 // 如果是borderTopColor 改为border-top-color val = val.replace(/([A-Z])/g,function(match, $1) { return "-" + $1.toLowerCase(); }); // 计算后的样式属性 return window.getComputedStyle(obj)[val]; }else{ // IE6,7,8 属性名只能使用驼峰 // 当用户输入border-width 需要改为borderWidth val = val.replace(/-([a-z])/g,function(match, $1){ return $1.toUpperCase(); }); // 计算后的样式属性 return obj.currentStyle[val]; } } 4 浏览器事件兼容 var Event = { // 事件绑定兼容 addEvent: function(element,type,callback){ if(element.addEventListener){ // 高级浏览器 element.addEventListener(type,callback,false); }else if(element.attachEvent){ // 低版本IE浏览器 element.attachEvent('on' + type,callback); } }, // 事件移除兼容 removeEvent: function(element,type,callback){ // 高级浏览器 if(element.removeEventListener){ element.removeEventListener(type,callback,false); }else{ // 低版本IE浏览器 element.detachEvent('on' + type, callback); } }, // 获取事件对象兼容 getEvent: function(event){ return event || window.event; }, // 获取事件触发对象兼容 getTarget: function(event){ return event.target || event.srcElement; }, // 阻止事件冒泡兼容 stopPropagation: function(event){ if(event.stopPropagation){ event.stopPropagation(); }else{ event.cancelBubble = true; } }, // 阻止默认事件兼容 preventDefault: function(event){ if(event.prevenDefault){ event.preventDefault(); }else{ event.returnValue = false; } } }
js 常见兼容性处理
最新推荐文章于 2023-09-21 23:25:43 发布