这个简易的 DOM 包提供了三个功能,一是使特定的元素水平或者垂直居中;二是可以动态地执行字符串中的 JS 代码;三是最常用的一个操作,即:通过元素 ID 来获取指定的元素,返回单个元素引用或者多个元素引用的数组。
来看看源码:
/** * jscript.dom package * This package contains functions for accessing and manipulating the DOM. */ /*命名空间*/ if (typeof jscript == 'undefined') { jscript = function() { } } jscript.dom = function() { } /** * Center a given layer on the screen horizontally. *(水平居中一个元素 inObj) * @param inObj A reference to the element (presumably a layer) to center. */ jscript.dom.layerCenterH = function(inObj) { var lca; var lcb; var lcx; var iebody; var dsocleft; iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;/*判断 IE 中页面采用的渲染方式*/ if (window.innerWidth) { lca = window.innerWidth; } else { lca = iebody.clientWidth; }/*获取浏览器窗口的宽度*/ lcb = inObj.offsetWidth;/*获取 layer 的宽度*/ lcx = (Math.round(lca / 2)) - (Math.round(lcb / 2)); dsocleft = document.all ? iebody.scrollLeft : window.pageXOffset; inObj.style.left = lcx + dsocleft + "px"; } // End layerCenterH(). /** * Center a given layer on the screen vertically. *(垂直居中一个元素) * @param inObj A reference to the element (presumably a layer) to center. */ jscript.dom.layerCenterV = function(inObj) { var lca; var lcb; var lcy; var iebody; var dsoctop; iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body; if (window.innerHeight) { lca = window.innerHeight; } else { lca = iebody.clientHeight; } lcb = inObj.offsetHeight; lcy = (Math.round(lca / 2)) - (Math.round(lcb / 2)); dsoctop = document.all ? iebody.scrollTop : window.pageYOffset; inObj.style.top = lcy + dsoctop + "px"; } // End layerCenterV(). /** * This function is used to execute all the script blocks found in a * chunk of text. This is typically used to execute the scripts found in * an AJAX response. *(此函数用来执行 <script> 块里面的 js 代码,可以把它用在 AJAX 的 response 上,也就是用来执行 response 里面的 <script>) * @param inText The text to parse scripts from to execute. */ jscript.dom.execScripts = function (inText) { var si = 0; while (true) { // Finding opening script tag.(找到开始处的标签) var ss = inText.indexOf("<" + "script" + ">", si); if (ss == -1) { return; } // Find closing script tag.(找到闭合处的标签) var se = inText.indexOf("<" + "/" + "script" + ">", ss); if (se == -1) { return; } // Jump ahead 9 characters, after the closing script tag.(跳过 9 个字符) si = se + 9; // Get the content in between and execute it. var sc = inText.substring(ss + 8, se); eval(sc); } } // End execScripts(). /** * This function accepts one or more DOM IDs and returns an array which * contains a reference to all of them. If no arguments are passed in, * null is returned. If a single ID is passed in, a single element is * returned. If more than one ID is passed in, an array is passed back. *(当传入一个 ID 的时候返回一个单独的 element,若传入多个 ID 的时候则会返回 elements 数组) * @param ?? A variable number of arguments, each being a DOM ID to get a * reference to (or a single ID). * @return Null is no arguments passed in, or a reference to a single * DOM element if one ID passed in, or an array of references to * DOM elements if multiple IDs passed in. */ jscript.dom.getDOMElements = function() { if (arguments.length == 0) { return null; } if (arguments.length == 1) { return document.getElementById(arguments[0]); } var elems = new Array(); for (var i = 0; i < arguments.length; i++) { elems.push(document.getElementById(arguments[i])); } return elems; } // End getDOMElements().
这个包提供了跨浏览器的实现,注意代码在 IE 中的处理,与 IE 的版本相关,判断采用的渲染方式:
iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
当 document.compatMode 等于 BackCompat(标准兼容模式关闭) 时,iebody 要取 document.body;
当 document.compatMode 等于 CSS1Compat (标准兼容模式开启)时,iebody 要取 document.documentElement。
来看看测试代码:
<a href="javascript:void(0);" onClick="jscript.dom.execScripts('this is a string<script>alert(\'I am script within a string\');</script>more string');"> execScripts()-Execute the script blocks in a string </a> <br /><br /> <div id="testElem1">testElem1</div> <div id="testElem2">testElem2</div> <a href="javascript:void(0);" onClick="alert(jscript.dom.getDOMElements('testElem1'));alert(jscript.dom.getDOMElements('testElem1','testElem2'));"> getDOMElements()-Get a single element, then multiple elements </a> <br /><br />
来看看测试效果:
execScripts()-Execute the script blocks in a string
testElem1
testElem2
getDOMElements()-Get a single element, then multiple elements
这里只测试了:execScripts() 和 getDOMElements() ,元素居中的函数可以自行测试下!:->