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均通过.

作者：任磊

posted on 2010-09-30 17:25 VicentRen 阅读(5216) 评论(0) 编辑收藏举报