js 利用className得到对象的实现代码


Posted in Javascript onNovember 15, 2011

下面代码直接copy 就能用l

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<style type="text/css"> 
/* Reset style */ 
* { margin:0; padding:0;} 
.input_ocurrent { padding:2px; border:1px solid #DDD; background:#FFF;} 
.input_ocurrent:hover, .input_ocurrent:focus { border:1px solid #444; background:#DDD;} 
.input_current { padding:2px; border:1px solid #444; background:#DDD;} 
</style> 
<script type="text/javascript"> 
function displayInput(elementID) { 
//得到span标签的集合 
var spanzone = document.getElementsByTagName("span"); 
//得到span标签的数量(放到for里边会重复计算) 
var spanlength=spanzone.length; 
var inputzone;//你所需要的那个span 
for(var i=0;i<spanlength;i++) 
{ 
//得到你想找的这个 
if(spanzone[i].className==elementID) 
{ 
inputzone=spanzone[i]; 
} 
} 
//得到span标签的input标签集合 
var inputTx=inputzone.getElementsByTagName("input"); 
//span里边的input的集合数量(单独写防止重复计算) 
var inputLength=inputTx.length; 
for (var i=0;i <inputLength; i++) { 
//动态添加onmouseover事件:当鼠标移到input上的时候判断这个inpu的class是不是input_ocurrent 如果是的话就添加onmouseover事件 移出同理 
if (inputTx[i].className =="input_ocurrent"){ 
inputTx[i].onmouseover=function() { 
this.className ="input_current"; 
} 
inputTx[i].onmouseout=function() { 
this.className ="input_ocurrent"; 
} 
} 
} 
} 
window.onload =function() { 
displayInput("input_zone"); 
} 
</script> 
</head> 
<body> 
<span class="input_zone"> 
<input class="input_ocurrent" name="" type="text" size=""/> 
<input class="input_ocurrent" name="" type="text" size=""/> 
</span> 
</body> 
</html>
Javascript 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
JavaScript中number转换成string介绍
Dec 31 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
vue计算属性get和set用法示例
Feb 08 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
May 28 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 Javascript
基于jquery的web页面日期格式化插件
Nov 15 #Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 #Javascript
jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
Nov 15 #Javascript
读JavaScript DOM编程艺术笔记
Nov 15 #Javascript
js constructor的实际作用分析
Nov 15 #Javascript
浅谈Javascript面向对象编程
Nov 15 #Javascript
js Html结构转字符串形式显示代码
Nov 15 #Javascript
You might like
检测png图片是否完整的php代码
2010/09/06 PHP
PHP中的函数嵌套层数限制分析
2011/06/13 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
Python给你的头像加上圣诞帽
2018/01/04 Python
Python操作MySQL模拟银行转账
2018/03/12 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
在mac下查找python包存放路径site-packages的实现方法
2018/11/06 Python
Python爬虫文件下载图文教程
2018/12/23 Python
django框架模板语言使用方法详解
2019/07/18 Python
对python3中的RE(正则表达式)-详细总结
2019/07/23 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
Oracle的内存结构(Memory structures)
2015/06/10 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
设计部经理的岗位职责
2013/11/16 职场文书
户籍证明的格式
2014/01/13 职场文书
法律进机关实施方案
2014/03/12 职场文书
竞聘演讲稿精彩开头和结尾
2014/05/14 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
平安建设汇报材料
2014/12/29 职场文书
老龙头导游词
2015/02/11 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
社区安全温馨提示语
2015/07/14 职场文书
Windows Server 2019 配置远程控制以及管理方法
2022/04/28 Servers