zoukankan      html  css  js  c++  java
  • 简易 Javascript DOM 包 | 元素水平垂直居中 | 动态执行 JS 代码 | 获取指定元素

    这个简易的 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() ,元素居中的函数可以自行测试下!:->

  • 相关阅读:
    【BZOJ1046】[HAOI2007]上升序列
    【BZOJ1045】[HAOI2008]糖果传递
    【BZOJ1044】[HAOI2008]木棍分割
    【BZOJ1041】[HAOI2008]圆上的整点
    【LG2257】YY的GCD
    【BZOJ1018】[SHOI2008]堵塞的交通
    【LG4735】最大异或和
    【POJ2182】Lost Cows
    【POJ2482】Stars in Your Window
    【POJ1733】Parity game
  • 原文地址:https://www.cnblogs.com/catprayer/p/1860832.html
Copyright © 2011-2022 走看看