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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
用javascript来实现动画导航效果的代码
Dec 16 Javascript
js 页面输出值
Nov 30 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
May 16 Javascript
javascript作用域、作用域链(菜鸟必看)
Jun 16 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
Vue中对比scoped css和css module的区别
May 17 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
怎么使 Mysql 数据同步
2006/10/09 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
PHP运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
你需要知道的10个最佳javascript开发实践小结
2012/04/15 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
快速使用node.js进行web开发详解
2017/04/26 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
python中format()函数的简单使用教程
2018/03/14 Python
celery4+django2定时任务的实现代码
2018/12/23 Python
python正则表达式匹配[]中间为任意字符的实例
2018/12/25 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python实现植物大战僵尸游戏实例代码
2019/06/10 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
运动会广播稿20字
2014/02/18 职场文书
本科毕业自我鉴定
2014/03/20 职场文书
主管竞聘书范文
2014/03/31 职场文书
殡葬服务心得体会
2014/09/11 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android
搭建zabbix监控以及邮件报警的超级详细教学
2022/07/15 Servers