鼠标经过的文本框textbox变色


Posted in Javascript onMay 21, 2009

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; 
}
Javascript 相关文章推荐
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
Mar 02 Javascript
innerHTML属性,outerHTML属性,textContent属性,innerText属性区别详解
Mar 13 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JS函数进阶之prototy用法实例分析
Jan 15 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
jQuery 性能优化指南(3)
May 21 #Javascript
jQuery 性能优化指南(2)
May 21 #Javascript
jQuery 性能优化指南 (1)
May 21 #Javascript
javascript操作cookie_获取与修改代码
May 21 #Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 #Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 #Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 #Javascript
You might like
Protoss建筑一览
2020/03/14 星际争霸
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
10条php编程小技巧
2015/07/07 PHP
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
vue中倒计时组件的实例代码
2018/07/06 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
使用layer模态框给新页面传值的方法
2019/09/27 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
python基于property()函数定义属性
2020/01/22 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
法国时尚品牌乐都特瑞士站:La Redoute瑞士
2016/09/05 全球购物
迪卡侬荷兰官网:Decathlon荷兰
2017/10/29 全球购物
俄罗斯家居用品购物网站:Евродом
2020/11/21 全球购物
万豪国际住宅与别墅集团:Homes & Villas by Marriott International
2020/10/08 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
艺术设计专业个人求职信范文
2013/12/11 职场文书
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android