JavaScript 通过 className 获取元素并实现交互的示例

通过 className 获取元素并实现交互

以下代码可以直接复制使用。

 
<!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++)
{ 
// 查找具有指定 className 的 span
if(spanzone[i].className==elementID)
{ 
inputzone=spanzone[i];
} 
} 
// 获取目标 span 内的所有 input 标签
var inputTx=inputzone.getElementsByTagName("input");
// 获取 input 的数量（单独存储以防重复计算）
var inputLength=inputTx.length;
for (var i=0;i <inputLength; i++) {
// 动态添加 onmouseover 事件：当鼠标移入 input 时，判断其 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>