当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 鼠标经过的文本框textbox变色

Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
javascript call和apply方法
createElement动态创建HTML对象脚本代码
javascript getElementById 使用方法及用法
javascript脚本调试方法小结
Document和Document.all区别分析
Javascript 对象的解释
javascript 随意拖动的小方块特效
Javascript 陷阱 window全局对象
Javascript hasOwnProperty 方法 & in 关键字
Javascript 构造函数 实例分析
javascript replace()方法的简单分析
javascript 尚未实现错误解决办法
js 对象外部访问或者调用问题
JavaScript模拟下拉菜单代码
js获取鼠标位置杂谈附多浏览器兼容代码
JS获得鼠标位置(兼容多浏览器ie,firefox)IT学习网修正版
JS 自动安装exe程序
javascript 动态添加事件代码
Js callBack 返回前一页的js方法

Javascript 中的 鼠标经过的文本框textbox变色


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 573 ::
收藏到网摘: n/a

文本框 textbox 变色 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;
}