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均通过.
作者：任磊