zoukankan      html  css  js  c++  java
  • JS给Element添加方法

    Property类库大家应该都知道,他里面的有个hide和show方法很好用,所以我也想自己弄个那样的方法来用,于是在网上收罗下资料,经过自己的消化整理,代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>扩展element</title>
    <script language="javascript" type="text/javascript">
    function Hide(element) {
        element.style.display = 'none';
        return element;
      }
    function Show(element) {
        element.style.display = '';
        return element;
      }
    
    var __G={'hide':Hide,'show':Show};
    function $(s){
      var el=document.getElementById(s);
      if(el && !el._extendedByMyScriptName){
        for(var i in __G){
          var _tmpFn=function(_fn,_o){//delegate function
              return function(){
                if(typeof(_fn)=="function");
                  return _fn.apply(null,
                    [_o].concat(Array.prototype.slice.call(arguments)));
              }
          };
          el[i]=_tmpFn(__G[i],el);
        }
        //this statement is use to stop from too much recursion
        el._extendedByMyScriptName=true;
      }
     return el;
    }
    function test1()
    {
    $('Label1').hide();
    }
    
    function test2()
    {
    $('Label1').show();
    }
    
    </script>
    </head>
    
    <body>
    <label id="Label1">asdfasdfsadfasdf</label>
    <input id="btn1" name="Button1" type="button" value="隐藏" onclick="test1()" />
    <input id="btn2" name="Button2" type="button" value="显示" onclick="test2()" />
    </body>
    
    </html>

    分析上面的代码,实际上时在$函数里为调用该函数后返回的对象添加一个hide和show方法.

    具体的那些属性方法,别人从哪里找来的 我也就不清楚了,不过我放到不通的浏览器测试,确实都有这些属性和方法.所以说人外有人,山外有山.总会有别人知道而你不知道的东西.虚心向学,多多积累,积少成多,才是一个搞技术,学习技术的人 应该具备的良好习惯!!

    说明:当时查的网址现在不记得,不过这个效果的确很拉风,如果举一反三应该会有很大作用.

    测试结果:IE6.0,FireFox,Chrome,Opera均通过.

    作者:任磊

  • 相关阅读:
    loadrunner获取Http信息头中指定值作为参数
    soapUI使用-DataSource获取oracle库中的参数
    [转]vim编辑器---批量注释与反注释
    String() 函数把对象的值转换为字符串。
    自定义滚动条mCustomScrollbar
    css实现强制不换行/自动换行/强制换行
    在网页中添加新浪微博“加关注”按钮
    移动前端调试方案(Android + Chrome 实现远程调试)
    font-family
    移动端touch事件滚动
  • 原文地址:https://www.cnblogs.com/Ren_Lei/p/1839639.html
Copyright © 2011-2022 走看看