js控制按钮样式

common.js:

//对系统按钮的样式进行控制
function showImsg(buttids){
	var ids = buttids.split(",");
	var button;
	for(var i=0;i<ids.length;i++){
		button = document.getElementById(ids[i]);
		if(button == null || button == undefined){
			continue;
		}
		if(button.value.length<=4){
			button.className="btn_sty2_4";
			button.onmouseover = function(){
				this.style.cursor="pointer";
				this.className="btn_sty22_4";
			}
			button.onmouseout = function(){
				this.style.cursor="pointer";
				this.className="btn_sty2_4";
				
			}
			button.onmousedown = function(){
				this.style.cursor="pointer";
				this.className="btn_sty23_4";
			}
		}
		if(button.value.length>4){
			button.className="btn_sty2_6";
			button.style.marginTop="3";
			button.onmouseover = function(){
				this.style.cursor="pointer";
				this.className="btn_sty22_6";
			}
			button.onmouseout = function(){
				this.style.cursor="pointer";
				this.className="btn_sty2_6";
			}
			button.onmousedown = function(){
				this.style.cursor="pointer";
				this.className="btn_sty23_6";
			}
		}
	}	
}

 

common.css:

.btn_sty1_4 {
    background: url("../images/btn_sty1_4.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    text-align: center;
    width: 77px;
}
.btn_sty12_4 {
    background: url("../images/btn_sty1_4.png") no-repeat scroll -87px top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    text-align: center;
    width: 77px;
}
.btn_sty13_4 {
    background: url("../images/btn_sty1_4.png") no-repeat scroll -174px top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    text-align: center;
    width: 77px;
}
.btn_sty1_6 {
    background: url("../images/btn_sty1_6.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    text-align: center;
    width: 97px;
}
.btn_sty12_6 {
    background: url("../images/btn_sty1_6.png") no-repeat scroll -107px top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    text-align: center;
    width: 97px;
}
.btn_sty13_6 {
    background: url("../images/btn_sty1_6.png") no-repeat scroll -214px top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    text-align: center;
    width: 97px;
}
.btn_sty2_4 {
    background: url("../images/btn_sty2_4.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    margin-top: 2px;
    text-align: center;
    width: 80px;
}
.btn_sty22_4 {
    background: url("../images/btn_sty2_4.png") no-repeat scroll -88px top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    margin-top: 2px;
    text-align: center;
    width: 80px;
}
.btn_sty23_4 {
    background: url("../images/btn_sty2_4.png") no-repeat scroll -175px top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    margin-top: 2px;
    text-align: center;
    width: 80px;
}
.btn_sty2_6 {
    background: url("../images/btn_sty2_6.png") no-repeat scroll left top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    margin-top: 2px;
    text-align: center;
    width: 100px;
}
.btn_sty22_6 {
    background: url("../images/btn_sty2_6.png") no-repeat scroll -107px top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    margin-top: 2px;
    text-align: center;
    width: 100px;
}
.btn_sty23_6 {
    background: url("../images/btn_sty2_6.png") no-repeat scroll -214px top rgba(0, 0, 0, 0);
    border: 0 none;
    color: #FFFFFF;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    margin-top: 2px;
    text-align: center;
    width: 100px;
}