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

时间：2020-10-20 13:14:02|栏目：JavaScript代码|点击：次

下面代码直接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实现图片轮播特效

栏目：JavaScript代码

下一篇：JavaScript中常见获取元素的方法汇总

本文标题：js 利用className得到对象的实现代码

本文地址：http://www.codeinn.net/misctech/13874.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程