兼容性問題：函數（方法）兼容

描述：部分W3C指定的函數，有部分老的瀏覽器不支持

解決：

條件判斷，如果有，則使用，添加原型方法，例如 String 的 trim 方法

if(!String.prototype.trim){
    String.prototype.trim = function(){
        return this.replace(/^\s\s*/,‘‘).replace(/\s\s*$/,‘‘)
    }
}

兼容性問題：瀏覽器視口、屏幕、頁面寬高獲取

解決：

1. 獲得當前頁面 HTML文檔所在窗口 寬度

//所有瀏覽器都支持這種寫法，不存在兼容性問題
var w = document.body.clientWidth
 
var h = document.body.clientHeight

2. 獲得瀏 覽器窗口內部 寬度 / 高度 ，比 HTML文檔所在窗口寬度 多 16px

// document.documentElement.clientWidth IE瀏覽器寫法
// window.innerWidth 其他瀏覽器寫法
var w = document.documentElement.clientWidth || window.innerWidth
var h = document.documentElement.clientHeight || window.innerHeight

3.獲得 HTML頁面內容

//沒有兼容性問題
var h = document.body.scrollHeight
var h = document.body.scrollWidth

4. 獲得當前頁面 被卷去的高度 / 寬度

//window.pageYOffset 其他瀏覽器寫法
//document.documentElement.scrollTop IE瀏覽器寫法
var offsetY = window.pageYOffset || document.documentElement.scrollTop

兼容性問題：事件

獲取事件

    document.onclick=function
 
(ev){//谷歌火狐的寫法，IE9以上支持，往下不支持；
        var e=ev;
        console.log(e);
    }
    document.onclick=function(){//谷歌和IE支持，火狐不支持；
        var e=event;
        console.log(e);
    }
    document.onclick=function(ev){//兼容寫法；
        var e=ev||window.event;
        var mouseX=e.clientX;//鼠標X軸的坐標
        var mouseY=e.clientY;//鼠標Y軸的坐標
    }

JS常見兼容性問題