下面四个函数就是其中的一部分。 首先我们要添加一段浏览器检测脚本： 复制代码 代码如下: /************************************ * 检测浏览器 ***********************************/ 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<l; i++) { _this.list[i](); } })(); } 例如： 复制代码 代码如下: domready(function(){ alert("DOM 加载完毕！"); });

　　推荐阅读

　　风吟的小型JavaScirpt库 (FY.JS).

小弟刚学javascript没几天不发出来给各位高手指教看看这个小库哪方面可以做的更好实在是不会进步，于是我发出来求喷来了。这个小玩意我开发的初衷就是给自己使用的不建议大家使用。你要是觉得风吟的代码写得不好请>>>详细阅读

本文标题：javascript下4个跨浏览器必备的函数

地址：http://www.17bianji.com/kaifa2/JS/26913.html

 1/2    1