鼠标经过的文本框textbox变色
程序员文章站
2023-11-27 11:59:04
js文件:复制代码 代码如下:function mouseaction() { var textinputs = document.getelementsbytagname...
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;
}
复制代码 代码如下:
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;
}