javascript下4個跨瀏覽器必備的函數_javascript技巧

首先我們要添加一段瀏覽器檢測腳本：
代碼如下:
/************************************
* 檢測瀏覽器
***********************************/
var user = navigator.userAgent;
var browser = {};
browser.opera = user.indexOf("Opera") > -1 && typeof window.opera == "object";
browser.khtml = (user.indexOf("KHTML") > -1 || user.indexOf("AppleWebKit") > -1 || user.indexOf("Konqueror") > -1) && !browser.opera;browser.ie = user.indexOf("MSIE") > -1 && !browser.opera;
browser.gecko = user.indexOf("Gecko") > -1 && !browser.khtml;
if ( browser.ie ) {
var ie_reg = /MSIE (\d+\.\d+);/;
ie_reg.test(user);
var v = parseFloat(RegExp["$1"]);
browser.ie55 = v <= 5.5;
browser.ie6 = v <= 6;
}

一) 添加事件綁定 bind()
這個想必大家都已知道。IE 的事件綁定函數是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 則兩種都支持。下面進行封裝。
代碼如下:
/************************************
* 添加事件綁定
* @param obj : 要綁定事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件處理函數
************************************/
function bind( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
例如添加一個頁面點擊事件：

bind(document, "click", function() {
alert("Hello, World!!");
});

二) 刪除事件綁定 unbind()
和 bind() 函數參數相同，功能相反。
代碼如下:
/************************************
* 刪除事件綁定
* @param obj : 要刪除事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick"
* @param fn : 事件處理函數
************************************/
function unbind( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}

三) 獲取元素的計算樣式
計算樣式也叫最終樣式，也就是元素最終呈現出來的樣式。IE 用的是元素的 currentStyle 屬性，而其他瀏覽器則是標準的 document.defaultView.getComputedStyle() 方法。
代碼如下:
/************************************
* 返回元素的計算樣式
* @param element : 元素
* @param key : 樣式名稱(駱駝)
************************************/
function getStyle(element, key) {
// 參數不正確
if ( typeof element != "object" || typeof key != "string" || key == "" )
return false;

// 不透明度
if( key == "opacity" ) {
if(browser.ie) {
var f = element.filters;
if(f && f.length > 0 && f.alpha) {
return (f.alpha.opacity / 100);
}
return 1.0;
}
return document.defaultView.getComputedStyle(element, null)["opacity"];
}

// 浮動
if ( key == "float" ) {
key = (browser.ie ? "styleFloat" : "cssFloat");
}
if ( typeof element.currentStyle != "undefined" ){
return element.currentStyle[key];
} else {
return document.defaultView.getComputedStyle(element, null)[key];
}
}

IE 和其他瀏覽器的透明度機制不一樣，這里統一用 opacity 表示透明度。還有，由于 float 是 JavaScript 的保留字，所以瀏覽器對其進行了轉義，IE 用的是 styleFloat，其他則為 cssFloat。這里統一為 float。

例如：獲取透明度
代碼如下:
var a = document.getElementById("test");
var opacity = getStyle(a, "opacity");

四) DOM 加載完畢事件綁定 domready()
domready 和 window.onload 有所不同，window.onload 是頁面所有元素全部加載完畢，包括圖像，視頻等一些東西。而一般情況下我們不需要等那么久，而只需要 DOM 可用即可。
代碼如下:
/************************************
* domready
* @param fn: 要執行的函數
************************************/
function domready(fn) {
// 參數不正確
if(typeof fn != "function")
return false;
if(typeof document.addEventListener == "function") { // 非 IE 瀏覽器
document.addEventListener("DOMContentLoaded", fn, false);
return;
}
var _this = arguments.callee;
if(_this.ready) // 如果 DOM 已經加載完畢, 則直接執行
return fn();

if(!_this.list) // 創建一個待執行函數數組
_this.list = [];

_this.list.push(fn);

if (_this.done) return; // 正在循環檢測則返回
(function() { // 循環檢測
_this.done = true;
try {
document.documentElement.doScroll("left");
} catch(error) {
setTimeout(arguments.callee, 0);
return;
}
// DOM 加載完畢, 執行所有待執行函數
_this.ready = true;
for (var i=0, l=_this.list.length; i_this.list[i]();
}
})();
}

例如：
代碼如下:
domready(function(){
alert("DOM 加載完畢！");
});

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com