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

 更新时间:2011年11月15日 18:31:33   作者:  
利用className得到对象的实现代码,大家可以看下代码的实现原理。
下面代码直接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删除一个html元素节点的方法

    javascript删除一个html元素节点的方法

    这篇文章主要介绍了javascript删除一个html元素节点的方法,可通过获取父节点再查找并删除子节点来实现该功能,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • JavaScript原生编写《飞机大战坦克》游戏完整实例

    JavaScript原生编写《飞机大战坦克》游戏完整实例

    飞机大战坦克是一款小游戏,相信很多朋友都有玩过,由于最近在深入学习Javascript,所以想着用利用Javascript来实现这个游戏,下面这篇文章主要介绍了如何利用JavaScript原生编写《飞机大战坦克》游戏,需要的朋友可以参考下
    2017-01-01
  • 利用JavaScript实现的10种排序算法总结

    利用JavaScript实现的10种排序算法总结

    这篇文章主要介绍了利用JavaScript实现的十种排序算法,主要介绍了冒泡,选择,插入,希尔,归并,快速,堆排,计数,桶排和基数,有感兴趣的小伙伴可以参考阅读本文
    2023-05-05
  • 微信小程序仿抖音短视频切换效果的实例代码

    微信小程序仿抖音短视频切换效果的实例代码

    这篇文章主要介绍了微信小程序仿抖音短视频切换效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-06
  • Web Components使用生命周期回调函数实例详解

    Web Components使用生命周期回调函数实例详解

    这篇文章主要为大家介绍了Web Components使用生命周期回调函数实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • 利用OpenLayer绘制扇形的示例代码

    利用OpenLayer绘制扇形的示例代码

    这篇文章主要介绍了如何利用OpenLayer实现绘制扇形,文中的示例代码讲解详细,对我们学习OpenLayer有一定的帮助,感兴趣的可以了解一下
    2022-06-06
  • JS刷新父窗口的几种方式小结(推荐)

    JS刷新父窗口的几种方式小结(推荐)

    下面小编就为大家带来一篇JS刷新父窗口的几种方式小结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 微信小程序文字显示换行问题

    微信小程序文字显示换行问题

    这篇文章主要介绍了微信小程序文字显示换行问题,文中给出了解决方案,需要的朋友可以参考下
    2019-07-07
  • Three.Js实现看房自由小项目

    Three.Js实现看房自由小项目

    目前随着元宇宙概念的爆火,THREE技术已经深入到了物联网、VR、游戏、数据可视化等多个平台,今天我们主要基于THREE实现一个三维的VR看房小项目,感兴趣的朋友跟随小编一起看看吧
    2022-10-10
  • JavaScript实现水印效果的示例代码

    JavaScript实现水印效果的示例代码

    这篇文章主要为大家详细介绍了JavaScript如何利用canvas实现添加水印的效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-05-05

最新评论