位置:海鸟网 > IT > JavaScript >

JS给Element添加方法

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><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均通过.