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

　　下面代码直接copy 就能用l

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　/* 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>

　　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>

　　</body>

　　</html>