javascript下4個(gè)跨瀏覽器必備的函數(shù)
更新時(shí)間：2010年03月07日 13:01:31 作者：
如果你的項(xiàng)目要用到 JavaScript，而你不使用任何 JavaScript 框架，那么對于那些常用且各個(gè)瀏覽器明顯不同的地方就需要用函數(shù)來封裝起來。
下面四個(gè)函數(shù)就是其中的一部分。
首先我們要添加一段瀏覽器檢測腳本：
/************************************
* 檢測瀏覽器
***********************************/
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()
這個(gè)想必大家都已知道。IE 的事件綁定函數(shù)是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 則兩種都支持。下面進(jìn)行封裝。
/************************************
* 添加事件綁定
* @param obj : 要綁定事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件處理函數(shù)
************************************/
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 );
}
例如添加一個(gè)頁面點(diǎn)擊事件：
bind(document, "click", function() {
alert("Hello, World!!");
});
二) 刪除事件綁定 unbind()
和 bind() 函數(shù)參數(shù)相同，功能相反。
/************************************
* 刪除事件綁定
* @param obj : 要刪除事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick"
* @param fn : 事件處理函數(shù)
************************************/
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 );
}
三) 獲取元素的計(jì)算樣式
計(jì)算樣式也叫最終樣式，也就是元素最終呈現(xiàn)出來的樣式。IE 用的是元素的 currentStyle 屬性，而其他瀏覽器則是標(biāo)準(zhǔn)的 document.defaultView.getComputedStyle() 方法。
/************************************
* 返回元素的計(jì)算樣式
* @param element : 元素
* @param key : 樣式名稱(駱駝)
************************************/
function getStyle(element, key) {
// 參數(shù)不正確
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 和其他瀏覽器的透明度機(jī)制不一樣，這里統(tǒng)一用 opacity 表示透明度。還有，由于 float 是 JavaScript 的保留字，所以瀏覽器對其進(jìn)行了轉(zhuǎn)義，IE 用的是 styleFloat，其他則為 cssFloat。這里統(tǒng)一為 float。
例如：獲取透明度
var a = document.getElementById("test");
var opacity = getStyle(a, "opacity");
四) DOM 加載完畢事件綁定 domready()
domready 和 window.onload 有所不同，window.onload 是頁面所有元素全部加載完畢，包括圖像，視頻等一些東西。而一般情況下我們不需要等那么久，而只需要 DOM 可用即可。
/************************************
* domready
* @param fn: 要執(zhí)行的函數(shù)
************************************/
function domready(fn) {
// 參數(shù)不正確
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 已經(jīng)加載完畢, 則直接執(zhí)行
return fn();
if(!_this.list) // 創(chuàng)建一個(gè)待執(zhí)行函數(shù)數(shù)組
_this.list = [];
_this.list.push(fn);
if (_this.done) return; // 正在循環(huán)檢測則返回
(function() { // 循環(huán)檢測
_this.done = true;
try {
document.documentElement.doScroll("left");
} catch(error) {
setTimeout(arguments.callee, 0);
return;
}
// DOM 加載完畢, 執(zhí)行所有待執(zhí)行函數(shù)
_this.ready = true;
for (var i=0, l=_this.list.length; i<l; i++) {
_this.list[i]();
}
})();
}
例如：
domready(function(){
alert("DOM 加載完畢！");
});
首先我們要添加一段瀏覽器檢測腳本：
復(fù)制代碼 代碼如下:
/************************************
* 檢測瀏覽器
***********************************/
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()
這個(gè)想必大家都已知道。IE 的事件綁定函數(shù)是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 則兩種都支持。下面進(jìn)行封裝。
復(fù)制代碼 代碼如下:
/************************************
* 添加事件綁定
* @param obj : 要綁定事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick".
* @param fn : 事件處理函數(shù)
************************************/
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 );
}
例如添加一個(gè)頁面點(diǎn)擊事件：
bind(document, "click", function() {
alert("Hello, World!!");
});
二) 刪除事件綁定 unbind()
和 bind() 函數(shù)參數(shù)相同，功能相反。
復(fù)制代碼 代碼如下:
/************************************
* 刪除事件綁定
* @param obj : 要刪除事件的元素
* @param type : 事件名稱。不加 "on". 如 : "click" 而不是 "onclick"
* @param fn : 事件處理函數(shù)
************************************/
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 );
}
三) 獲取元素的計(jì)算樣式
計(jì)算樣式也叫最終樣式，也就是元素最終呈現(xiàn)出來的樣式。IE 用的是元素的 currentStyle 屬性，而其他瀏覽器則是標(biāo)準(zhǔn)的 document.defaultView.getComputedStyle() 方法。
復(fù)制代碼 代碼如下:
/************************************
* 返回元素的計(jì)算樣式
* @param element : 元素
* @param key : 樣式名稱(駱駝)
************************************/
function getStyle(element, key) {
// 參數(shù)不正確
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 和其他瀏覽器的透明度機(jī)制不一樣，這里統(tǒng)一用 opacity 表示透明度。還有，由于 float 是 JavaScript 的保留字，所以瀏覽器對其進(jìn)行了轉(zhuǎn)義，IE 用的是 styleFloat，其他則為 cssFloat。這里統(tǒng)一為 float。
例如：獲取透明度
復(fù)制代碼 代碼如下:
var a = document.getElementById("test");
var opacity = getStyle(a, "opacity");
四) DOM 加載完畢事件綁定 domready()
domready 和 window.onload 有所不同，window.onload 是頁面所有元素全部加載完畢，包括圖像，視頻等一些東西。而一般情況下我們不需要等那么久，而只需要 DOM 可用即可。
復(fù)制代碼 代碼如下:
/************************************
* domready
* @param fn: 要執(zhí)行的函數(shù)
************************************/
function domready(fn) {
// 參數(shù)不正確
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 已經(jīng)加載完畢, 則直接執(zhí)行
return fn();
if(!_this.list) // 創(chuàng)建一個(gè)待執(zhí)行函數(shù)數(shù)組
_this.list = [];
_this.list.push(fn);
if (_this.done) return; // 正在循環(huán)檢測則返回
(function() { // 循環(huán)檢測
_this.done = true;
try {
document.documentElement.doScroll("left");
} catch(error) {
setTimeout(arguments.callee, 0);
return;
}
// DOM 加載完畢, 執(zhí)行所有待執(zhí)行函數(shù)
_this.ready = true;
for (var i=0, l=_this.list.length; i<l; i++) {
_this.list[i]();
}
})();
}
例如：
復(fù)制代碼 代碼如下:
domready(function(){
alert("DOM 加載完畢！");
});
相關(guān)文章
在JavaScript中,可以使用HTML5提供的Canvas元素來進(jìn)行繪圖操作,要使用canvas元素,瀏覽器必須支持html5,Canvas是一個(gè)HTML元素,可以通過JavaScript來操作和繪制圖形,本文示例實(shí)現(xiàn)js和canvas繪制圓形金屬質(zhì)感的詩詞高級排版特效2024-09-09
JS中如何刪除某個(gè)父元素下的所有子元素？這里我介紹幾種方法,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
CutePsWheel javascript libary 控制輸入文本框?yàn)榭墒褂脻L輪控制的js庫
實(shí)現(xiàn)類似于Photoshop控制面板輸入文本數(shù)字的效果，所以名稱叫做PsWheel。用于控制輸入數(shù)字類型文本框?qū)崿F(xiàn)鼠標(biāo)滾輪上下滑動改變值，支持正整數(shù)、小數(shù)類型輸入文本。2010-02-02
遮罩層聽起來貌似很復(fù)雜，其實(shí)說白了就是一個(gè)全界面的半透明的div，用戶不可以點(diǎn)擊下邊的元素，或者說是點(diǎn)擊沒有反應(yīng)，接下來通過本文給大家介紹JavaScript如何制作遮罩層對話框，對js遮罩層相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01
這篇文章主要為大家詳細(xì)介紹了JavaScript模板引擎Template.js使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
微信小程序 JS動態(tài)修改樣式的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于微信小程序JS動態(tài)修改樣式的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
利用Javascript實(shí)現(xiàn)一套自定義事件機(jī)制
隨著web技術(shù)發(fā)展，使用JavaScript自定義對象愈發(fā)頻繁，讓自己創(chuàng)建的對象也有事件機(jī)制，通過事件對外通信，能夠極大提高開發(fā)效率。下面這篇文章主要給大家介紹了關(guān)于利用Javascript實(shí)現(xiàn)一套自定義事件機(jī)制的相關(guān)資料，需要的朋友可以參考下。2017-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript生成圖形驗(yàn)證碼的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript簡單生成 N~M 之間隨機(jī)數(shù)的方法
這篇文章主要介紹了JavaScript簡單生成 N~M 之間隨機(jī)數(shù)的方法,結(jié)合自定義函數(shù)分析了JS生成固定區(qū)間內(nèi)隨機(jī)數(shù)的相關(guān)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2017-01-01
日期聯(lián)動算是一個(gè)比較常見的功能了，隨便度娘一下，你就能找到N多代碼，今天給大家介紹的是個(gè)人比較常用，代碼很簡潔，高效，這里推擠給大家。2015-01-01