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的$(document).ready()和onload的加载顺序
May 26 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
js读取csv文件并使用json显示出来
Jan 09 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
JS实现键值对遍历json数组功能示例
May 30 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
Mar 29 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 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
动易数据转成dedecms的php程序
2007/04/07 PHP
ASP和PHP都是可以删除自身的
2007/04/09 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
node.js中使用q.js实现api的promise化
2014/09/17 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
javascript实现日历效果
2019/06/17 Javascript
Vue中的循环及修改差值表达式的方法
2019/08/29 Javascript
JS实现简单随机3D骰子
2019/10/24 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
python函数局部变量用法实例分析
2015/08/04 Python
flask session组件的使用示例
2018/12/25 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python多项式回归的实现方法
2019/03/11 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
英国最大的经认证的有机超市:Planet Organic
2018/02/02 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
移动通信行业实习自我鉴定
2013/09/28 职场文书
环保倡议书100字
2014/05/15 职场文书
计算机网络专业求职信
2014/06/05 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
2015年底工作总结范文
2015/05/15 职场文书
MySQL系列之四 SQL语法
2021/07/02 MySQL
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技