众所周知，做程序最讨厌的就是解决兼容问题，你懂得，。有人说，鹏哥，那怎么办呢？ 稳住，不要慌，兄弟，今天鹏哥就为你带来一些兼容问题统计，工作两年中遇到的兼容问题及解决写法，目前就想到这些，后期想起来或者是遇到会继续统计。有错误也请大家指出。感谢。
【获取非行间样式】
getComputedStyle(obj,false).width
chrome FF ie9+
注：false:没用，只是为了兼容老版本的火狐;
obj.currentStyle.width
ie7 8
兼容写法： (getComputedStyle(obj,false) || obj.currentStyle)[width]
//获取计算过后的样式
function getStyle(obj,sName){
if(obj.currentStyle){
return obj.currentStyle[sName];
}else{
return getComputedStyle(obj,false)[sName];
}
}
//或者是
function getStyle(obj,sName){
return (obj.currentStyle || getComputedStyle(obj,false))[sName]
}
【getByClass】
document.getElementsByClassName('red');
兼容性 高级浏览器
function getByClass(oParent,sClass){
if(oParent.getElementsByClassName){
return oParent.getElementsByClassName(sClass);
}else{
var aElement=oParent.getElementsByTagName('*');
var arr=[];
for(var i=0; i<aElement.length; i++){
var aClass=aElement[i].className.split(' ');
for(var j=0; j<aClass.length; j++){
if(aClass[j]==sClass){
arr.push(aElement[i]);
}
}
}
return arr
}
}
【DOM】
获取元素
同级.nextElementSibling || 同级.nextSibling
同级.previousElementSibling || 同级.previousSibling
兼容高级 兼容IE8-
父级.firstElementChild || 父级.firstChild
父级.lastElementChild || 父级.lastChild
【onmouseover和onmouseout】
这两个事件，当移入元素内的子级元素，会先默认出去，然后在进来
可以代替的事件
onmouseenter和onmouseleave
注：没有事件冒泡
【滚轮事件】
onmousewheel 滚轮事件
兼容性 非火狐
oEvent.wheelDelta
120 向上 >0
-120 向下 <0
DOMMouseScroll
兼容性 火狐
oEvent.detail
-3 向上 <0
3 向下 >0
注：你就记住火狐里面向下滚是正的
//添加滚轮事件***************************************
function addWheel(obj,fn){
if(navigator.userAgent.toLowerCase().indexOf('firefox')!=-1){
obj.addEventListener('DOMMouseScroll',wheel,false); //火狐
}else{
obj.onmousewheel=wheel; //非火狐
}
function wheel(ev){
var bDown=true;
var oEvent=ev || event;
if(oEvent.wheelDelta){
if(oEvent.wheelDelta>0){
bDown=false;
}else{
bDown=true;
}
}else{
//火狐
if(oEvent.detail>0){
bDown=true;
}else{
bDown=false;
}
}
fn&&fn(bDown);
oEvent.preventDefault&&oEvent.preventDefault(); //阻止默认事件(事件绑定中的默认事件) 只能用在高级浏览器中
return false; //阻止默认事件
}
}
【事件绑定】
addEventListener('不加on的事件名',函数名,false)
高级浏览器
attachEvent('加on的事件名'，函数名)
IE系列
//添加事件
function addEvent(obj,sEv,fn){
if(obj.addEventlistener){
obj.addEventlistener(sEv,fn,false);
}else{
obj.attachEvent('on'+sEv,fn);
}
}
解除绑定
obj.removeEventListener('不加on的事件名',函数名,false)
obj.detachEvent('加on的事件名'，函数名)
//解除事件
function removeEvent(obj,sEv,fn){
if(obj.removeEventlistener){
obj.removeEventlistener(sEv,fn,false);
}else{
obj.detachEvent('on'+sEv,fn);
}
}
【阻止默认事件】
return false 阻止默认事件 注：在事件绑定中失效
oEvent.preventDefault(); 事件绑定中阻止默认事件
注：单独用的话只能用在高级浏览器中
oEvent.preventDefault && oEvent.preventDefault();
return false
【事件委托】
作用：给未来的元素加事件 原理：利用的是事件冒泡
oEvent.srcElement
兼容性 非火狐
oEvent.target
兼容高级浏览器
tagName 标签名 注：标签名需要大写
兼容写法：oEvent.srcElement || oEvent.target
document.body.onclick=function(ev){
var oEvent=ev||event;
//获取是事件源对象
var oSrc=oEvent.srcElement || oEvent.target;
//判断源对象的标签名
if(oSrc.tagName=='DIV'){
alert('鹏哥')
}
}
【dom加载事件】
DOMContentLoaded
兼容非IE
onreadystatechange 只是用来模拟
兼容IE
document.readyState=='complete' 当加载成功的时候
兼容性 全兼容
//DOM事件**********************************************
function ready(fn){
if(document.addEventListener){
document.addEventListener('DOMContentLoaded',fn,false)
}else{
document.onreadystatechange=function(){
if(document.readyState=='complete'){
fn();
}
};
}
}
【滚动距离】
距离屏幕上方的滚动距离
document.body.scrollTop
兼容性：chrome
document.documentElement.scrollTop
兼容 非chrome
注：
document.documentElement 获取html简写
document.body 获取body的简写
//兼容写法：
document.documentElement.scrollTop || document.body.scrollTop
【事件对象】
事件对象：为了存储更加详细的事件信息
event 非火狐
ev 高级浏览器
//兼容写法：
var oEvent=ev || event
【eval和JSON.parse】
parse 标准 IE8+ 安全
eval 随意 ie6 不安全
//解析json*************************************************
function parseJson(str){
try{
return JSON.parse(str);
}catch(e){
return eval('('+str+')');
}
}
【ajax】
XMLHttpRequest 对象
兼容非IE
ActiveXObject 对象
兼容IE
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest;
}else{
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
//或者是try一下
try{
var oAjax=new XMLHttpRequest;
}catch(e){
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
}
【实时统计字数】
onkeydown
键盘按下的时候，按下的东西，还没进文本框
onkeyup
如果一直按下不统计
onkeyup=onkeydown
一直按下的时候有一点卡顿
oninput
IE9 删除有问题
iE9- 没有此方法
onpropertychange
IE系列
IE9 删除有问题
oT1.oninput=oT1.onpropertychange
IE9删除有问题
定时器
没问题，性能不好
方案：IE9用定时器，其他用oT1.oninput=oT1.onpropertychange
【opacity】
css中透明度写法
opacity:0-1
filter:alpha(opacity:1-100); 解决IE
opacity:(0-1)
filter:alpha(opacity:0-100)
【固定定位】
fixed 固定定位
不兼容IE6
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>前端开发-李鹏-两年经验-13522974525</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 100px;
height: 100px;
background: red;
position: absolute;
right: 0;
top: 0;
}
</style>
<script>
window.onload=window.onscroll=window.onresize=function(){
var oDiv=document.getElementById('div1');
//滚动距离
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//可视区的高度
var clientH=document.documentElement.clientHeight;
//物体的高度
var oDivH=oDiv.offsetHeight;
//oDiv赋值 top
oDiv.style.top=scrollTop+clientH-oDivH+'px';
}
</script>
</head>
<body style="height: 3000px">
<div id="div1"></div>
</body>
</html>
上面是用浏览器滚动事件和浏览器拖拽事件写的，也可以用定时器
/*window.onload=function(){
var oDiv=document.getElementById('div1');
setInterval(function(){
//滚动距离
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
//可视区的高度
var clientH=document.documentElement.clientHeight;
//物体的高度
var oDivH=oDiv.offsetHeight;
//oDiv赋值 top
oDiv.style.top=scrollTop+clientH-oDivH+'px';
},10);
}*/
【自定义属性】
高级浏览器会过滤自定义属性
目前想起的就这么多，毕竟两年了，遇到的也忘的差不多了。 以后工作在遇到再继续写。
以上结束。
网友评论