1. 程式人生 > >兼容代碼

兼容代碼

left 移動 combined anim 相對 lse floor scroll .com

function ver(id) { return document.getElementById(id); }

//兼容性 //設置任意的標簽中間的任意文本內容 function setInnerText(element,text) { if(typeof element.textContent=="undefined"){ element.innerText=text; }else { element.textContent=text; } } //獲取任意的標簽中間的文本內容 function getInnerText(element) { if(typeof element.textContent=="undefined"){ return element.innerText; }else { return element.textContent; } }



//封裝節點兼容性代碼 //獲取最後一個父級元素的第一個子級元素 function getFirstElement(element) { if (element.firstElementChild) { return element.firstElementChild; } else { var node = element.firstChild; while (node && node.nodeType != 1) { node = node.nextSibling; } return node; } } //獲取最後一個父級元素的最後一個子級元素 function getLastElementChild(element) { if(element.lastElementChild){ return element.lastElementChild; }else { var node=element.lastChild; while (node&&node.nodeType!=1){ node=node.previousSibling; } return node; } }


//獲取某個元素的所有兄弟元素 function getSiblings(element) { if (!element)return; var elements = []; var ele = element.previousSibling; while (ele) { if (ele.nodeType === 1) { elements.push(ele); } ele = ele.previousSibling; } ele = element.nextSibling; while (ele) { if (ele.nodeType === 1) { elements.push(ele);
} ele = ele.nextSibling; } return elements; }
//獲取某個元素的後一個兄弟元素 function getNextElement(element) { if (element.nextElementSibling) { return element.nextElementSibling } else { var node = element.nextSibling; while (node && node.nodeType != 1) { node = node.nextSibling; } return node; } }

//綁定事件兼容代碼 //為任意元素.綁定任意的事件,任意的元素,事件的類型,事件處理函數 function addEventlistener(element,type,fn) { //判斷瀏覽器是否支持這個方法 if(element.addEventListener){ element.addEventListener=(element,type,false); }else if(element.attachEvent){ element.attachEvent("on"+type,fn); }else { element["on"+type]=fn; } }

//解綁事件的兼容 //為任意的一個元素,解綁對應的事件 function removeEventListener(element,type,fnName) { if(element.removeEventListener){ element.removeEventListener(type,fnName,false); }else if(element.detachEvent){ element.detachEvent("on"+type,fnName); }else { element["on"+type]=null; } }
//計算後的樣式屬性---- 一個元素的任意的一個樣式屬性值 function getStyle(element,attr) { //判斷這個瀏覽器是否支持這個方法 return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; } //勻速動畫 function animate(element,json,fn) { //element--元素 attr--屬性名字 target--目標位置 //清理定時器 clearInterval(element.timeId); element.timeId=setInterval(function () { var flag=true;//默認,假設,全部到達目標 for(var attr in json){ //判斷這個屬性中attr中是不是opacity if (attr=="opacity"){ //獲取元素的當前的透明度,當前的透明度放大100倍 var current=getStyle(element,attr)*100; //目標的透明度放大100倍 var target=json[attr]*100; var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step; element.style[attr]=current/100; }else if(attr=="zIndex"){ //判斷這個屬性attr中是不是zIndex //層級改變就是直接改變這個屬性的值 element.style[attr]=json[attr]; }else { //獲取元素當前位置 var current=parseInt(getStyle(element,attr));//數字類型 //當前的屬性對應的目標值 var target=json[attr]; //移動的步數 var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step; element.style[attr]=current+"px"; } //判斷是否到達目標 if(current!=target){ flag=false; } } if(flag){ //清理計時器 clearInterval(element.timeId); //回調函數,所有屬性達到目標後才能使用 if(fn){ fn(); } } //測試代碼 console.log("目標位置:"+target+",當前位置:"+current+",每次移動的步數:"+step) },20); }
//兼容代碼 //把代碼放在一個對象中 var evt={ //window.event和事件參數對象e的兼容 getEvent:function (evt) { return window.event||evt; }, //可視區域橫坐標的兼容代碼 getClientX:function (evt) { return this.getEvent(evt).clientX; }, //可視區域縱坐標的兼容代碼 getClientY:function (evt) { return this.getEvent(evt).clientY; }, //頁面向左卷曲出去的橫坐標 getScrollLeft:function () { return window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft||0; }, //頁面向上卷曲出去的縱坐標 getScrollTop:function () { return window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop||0; }, //相對於頁面的橫坐標(pageX或者是clientX+scrollLeft) getPageX:function (evt) { return this.getEvent(evt).pageX?this.getEvent(evt).pageX:this.getClientX(evt)+this.getScrollLeft(); }, //相對於頁面的縱坐標(pageY或者是clientY+scrollTop) getPageY:function (evt) { return this.getEvent(evt).pageY?this.getEvent(evt).pageY:this.getClientY(evt)+this.getScrollTop(); } };
//獲取的是頁面向上或者向左卷曲出去的距離的值,返回的是對象 function getScroll() { return { top: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0, left: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft||0 }; }
//返回當前瀏覽器是什麽類型的瀏覽器 function userBrowser(){ var browserName=navigator.userAgent.toLowerCase(); if(/msie/i.test(browserName) && !/opera/.test(browserName)){ console.log("IE"); }else if(/firefox/i.test(browserName)){ console.log("Firefox"); }else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){ console.log("Chrome"); }else if(/opera/i.test(browserName)){ console.log("Opera"); }else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){ console.log("Safari"); }else{ console.log("不知道什麽鬼!"); } }
//foreach的兼容代碼 if (!Array.prototype.forEach) {
Array.prototype.forEach = function(callback, thisArg) {
var T, k;
if (this == null) { throw new TypeError(‘ this is null or not defined‘); }
// 1. Let O be the result of calling toObject() passing the // |this| value as the argument. var O = Object(this);
// 2. Let lenValue be the result of calling the Get() internal // method of O with the argument "length". // 3. Let len be toUint32(lenValue). var len = O.length >>> 0;
// 4. If isCallable(callback) is false, throw a TypeError exception. // See: http://es5.github.com/#x9.11 if (typeof callback !== "function") { throw new TypeError(callback + ‘ is not a function‘); }
// 5. If thisArg was supplied, let T be thisArg; else let // T be undefined. if (arguments.length > 1) { T = thisArg; }
// 6. Let k be 0 k = 0;
// 7. Repeat, while k < len while (k < len) {
var kValue;
// a. Let Pk be ToString(k). // This is implicit for LHS operands of the in operator // b. Let kPresent be the result of calling the HasProperty // internal method of O with argument Pk. // This step can be combined with c // c. If kPresent is true, then if (k in O) {
// i. Let kValue be the result of calling the Get internal // method of O with argument Pk. kValue = O[k];
// ii. Call the Call internal method of callback with T as // the this value and argument list containing kValue, k, and O. callback.call(T, kValue, k, O); } // d. Increase k by 1. k++; } // 8. return undefined }; }

兼容代碼