鼠标经过的文本框textbox变色

2022-10-18,,,

js文件:
复制代码 代码如下:
function mouseaction() {
var textinputs = document.getelementsbytagname("input");
var len = textinputs.length;
var index = 0;
var textinput;
/*
也能用 for in 语句遍历
for (textinput in textinputs){
textinputs[textinput].onmouseover = functionname;
}
*/
for( index = 0; index < len; index++ ) {
textinput = textinputs[index];
if( textinput.getattribute("type") == "text" ){
textinput.onmouseover = function (){
//也能用这种方式 this.style.backgroundcolor = "red";
this.classname = "txtmouseover"; //要先在html中引入css文件
}; //注意要加分号

textinput.onmouseout = function(){
this.classname = "txtmouseout";
};

textinput.onfocus = function(){
this.classname = "txtmousefocus";
};

textinput.onblur = function(){
this.classname = "txtmouseblur";
};
}
}
}

//也可以直接跟一个函数名,不要加引号,括号 window.onload = mouseaction;
window.onload = function(){
mouseaction();
};

css文件:
复制代码 代码如下:
/*主体居中显示*/
body{
    width: 80%;
    height: 800px;
    position: relative;
    margin-left: 10%;
    /*left: -40%;*/
    border: #00ccff solid thin;
}
.txtmouseover
{
border-color: #9ecc00;
}
.txtmouseout
{
border-color: #84a1bd;
}
.txtmousefocus
{
border-color: #9ecc00;
background-color: #e8f9ff;
}
.txtmouseblur
{
border-color: #84a1bd;
background-color: #ffffff;
}

《鼠标经过的文本框textbox变色.doc》

下载本文的Word格式文档,以方便收藏与打印。