好程式設計師分享javascript中的常見的相容寫法

好程式設計師分享 javascript 中的常見的相容寫法

1 .獲取後一個兄弟節點的相容寫法

 var nextElement=oLi3.nextElementSibling||oLi3.nextSibling;

2. 獲取前一個兄弟節點相容寫法

 var previousElement = oLi3.previousElementSibling || oLi3.previousSibling;

3. childNodes的相容使用

 function getChildNodes(ele) {

 //1.定義一個空的陣列

 var arr = [];

 //2.獲取指定元素

 var oEle = document.querySelector(ele);

 //3.將元素下邊的所有兒子拿到

 for (var i = 0; i < oEle.childNodes.length; i++) {

 //4.變數判斷真的兒子(元素節點nodeType==1)

 if (oEle.childNodes[i].nodeType == 1) {

 //5.將真兒子新增到陣列裡

                arr.push(oEle.childNodes[i])

 }

 }

 //6.返回陣列

 return arr;

 }

4.拿到第一個兒子

 var No1 = oBox.firstElementChild || oBox.firstChild;

5.拿到最後 個兒子

 var oLast = oBox.lastElementChild || oBox.lastChild;

6.事件目標物件相容

 var t = event.target || event.srcElement;

捲軸的相容寫法

一 簡單相容寫法

    document.documentElement.scrollTop||document.body.scrollTop

二 高階相容寫法

 function myScroll() {

 //  ie9以上, google,火狐都能用

 if (window.pageXOffset != undefined) {

 return {

 "left": window.pageXOffset,

 "top": window.pageYOffset

 }

 } else if (document.compatMode == "CSS1Compat") {

 // 標準 DTD (有宣告頭)

 return {

 "left": document.documentElement.scrollLeft,

 "top": document.documentElement.scrollTop

 }

 }

 // 非標準 沒有 DTD (沒有宣告頭)

 return {

 "left": document.body.scrollLeft,

 "top": document.body.scrollTop

 }

 }

html5的新標籤在 ie 6 7 8 下有相容問題,解決原理是 動態建立標籤 document.createElement,我可以是快速使用html5shiv外掛

事件物件的相容寫法

 var e=evt||window.event;

鍵盤事件

 var keyCode = e.keyCode || e.which;

獲取樣式的相容寫法

 function getStyle(obj, attr) {

 // 非ie,google,火狐

 if (window.getComputedStyle) {

 return window.getComputedStyle(obj, null)[attr];

 }

 //ie 6 8 9

 return obj.currentStyle[attr];

 }

阻止冒泡的相容

 if (e.stopPropagation) {

        e.stopPropagation();

 } else {

        e.cancelBubble = true;

 }

阻止預設行為

 if (e.preventDefault) {

        e.preventDefault()

 } else {

        e.returnValue = false;

 }

事件監聽的相容寫法

    oBtn.addEventListener("click", function () {

 alert("長沙千鋒老羅最帥");

 }, {

        once: true, // 只能被點一次

        useCapture: true // true||false

 })

 

 //obj 給指定的元素新增事件

 //type 事件的型別(click,mouseenter..)

 //fn 函式名稱

 //useCapTure 捕獲還是冒泡

 

 function addEvent(obj, type, fn, useCapTure) {

 if (obj.addEventListener) {

            obj.addEventListener(type, fn, useCapTure)

 } else {

            obj.attachEvent("on" + type, fn)

 }

 }

事件監聽移除相容寫法

 function removeEvent(obj, type, fn, useCapTure) {

 if (obj.removeEventListener) {

            obj.removeEventListener(type, fn, useCapTure);

 } else {

            obj.detachEvent("on" + type, fn);

 }

 }