目的仅是感谢楼主的分享，共同学习。而且，我对HTML元素的美化非常滴感兴趣。
目的：不改动现有HTML结构，不添加任何元素（除了加载一个js文件），实现<input type="button" value="submit"/>的样式美化。目前只测试了IE6和FF2.0
joel.js部分:
PART A：
检测、替换input标签（貌似应该检查下type属性=。=·）加载CSS文件。CSS部分稍后防出。
复制内容到剪贴板
代码:
(function(){
if(typeof(window.attachEvent)!='undefined'){
window.attachEvent("onload",ini);
}else if(typeof(window.addEventListener)!='undefined'){
window.addEventListener("load",ini,false);
}
})();
function ini(){
var cssfile="joel.css";
var buttonsHtml=document.getElementsByTagName("input");
for(var i=0;i<buttonsHtml.length;i++){
new joel.Button(buttonsHtml[i],buttonsHtml[i].value);
var cssfileref=document.createElement("link")
cssfileref.setAttribute("rel", "stylesheet")
cssfileref.setAttribute("type", "text/css");
cssfileref.setAttribute("href", cssfile);
document.getElementsByTagName("head")[0].appendChild(cssfileref)
}
}PART B:
这段只要是joel.Button的定义。有点问题，比如"document.body.replaceChild(this.outer,target_);"
复制内容到剪贴板
代码:
var joel=new Object();
joel.Button=function(target_,value_){
this.inputbutton=document.createElement("input");
this.inputbutton.type="button";
this.inputbutton.value=value_;
this.inner=document.createElement("span");
this.inner.className="buttoninner";
this.outer=document.createElement("span");
this.outer.className="buttonouter";
this.inner.appendChild(this.inputbutton);
this.outer.appendChild(this.inner);
this.outer.object=this;
this.outer.onmouseover=this.onmouseover;
this.outer.onmousedown=this.onmousedown;
this.outer.onmouseup=this.onmouseup;
this.outer.onmouseout=this.onmouseout;
this.outer.mouseover=this.onmouseover;
this.outer.mousedown=this.onmousedown;
this.outer.mouseup=this.onmouseup;
this.outer.mouseout=this.onmouseout;
document.body.replaceChild(this.outer,target_);
}
joel.Button.prototype={
onmouseover:function(){
var joelButton=this.object;
if(joelButton){
joelButton.outer.style.background="url(sprite.png) left -1700px repeat-x";
}
},
onmousedown:function(){
var joelButton=this.object;
if(joelButton){
joelButton.outer.style.background="url(sprite.png) left -1300px repeat-x";
}
},
onmouseup:function(){
var joelButton=this.object;
if(joelButton){
joelButton.outer.style.background="url(sprite.png) left -1700px repeat-x";
}
},
onmouseout:function(){
var joelButton=this.object;
if(joelButton){
joelButton.outer.style.background="url(sprite.png) left top repeat-x";
}
},
addEventListener:function(target,type,func){
if(window.attachEvent){
target.attachEvent(type,func);
}else if(window.addEventListener){
type=type.slice(2,type.length);
target.addEventListener(type,func,false);
}
}
}joel.css
复制内容到剪贴板
代码:
.buttonouter{
display:-moz-inline-box;
display:inline-block;
background:url(sprite.png) left top repeat-x;
border-width:1px 0;
border-color:#808080;
border-style:solid;
}
.buttoninner{
display:-moz-inline-box;
display:inline-block;
border-width:0 1px;
border-color:#808080;
border-style:solid;
margin:0 -1px;
*position:relative;
*left:-1px;
}
.buttonouter .buttoninner input{
line-height:2;
margin:0;
padding:0 10px;
background:transparent;
border:none;
min-height:2em;
*min-hight:auto;
}button.html:
复制内容到剪贴板
代码:
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="BUTTON/joel.js"></script>
</head>
<body>
<input type="button" value="你好"/>
<input type="button" value="你好"/>
<input type="button" value="你好"/>
<input type="button" value="你好"/>
<!--/*<span class="buttonouter">
<span class="buttoninner">
<input name="innerbutton" type="button" value="123" />
</span>*/-->
</span>
</body>
</html>完整下载
效果图：
[
本帖最后由 yzcj007 于 2008-2-26 23:42 编辑 ]
