快捷導(dǎo)航

js 利用className得到對象的實(shí)現(xiàn)代碼

更新時間：2011年11月15日 18:31:33 作者：

利用className得到對象的實(shí)現(xiàn)代碼，大家可以看下代碼的實(shí)現(xiàn)原理。

下面代碼直接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標(biāo)簽的集合 
var spanzone = document.getElementsByTagName("span"); 
//得到span標(biāo)簽的數(shù)量(放到for里邊會重復(fù)計算) 
var spanlength=spanzone.length; 
var inputzone;//你所需要的那個span 
for(var i=0;i<spanlength;i++) 
{ 
//得到你想找的這個 
if(spanzone[i].className==elementID) 
{ 
inputzone=spanzone[i]; 
} 
} 
//得到span標(biāo)簽的input標(biāo)簽集合 
var inputTx=inputzone.getElementsByTagName("input"); 
//span里邊的input的集合數(shù)量(單獨(dú)寫防止重復(fù)計算) 
var inputLength=inputTx.length; 
for (var i=0;i <inputLength; i++) { 
//動態(tài)添加onmouseover事件:當(dāng)鼠標(biāo)移到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> 

您可能感興趣的文章:

相關(guān)文章

javascript刪除一個html元素節(jié)點(diǎn)的方法
這篇文章主要介紹了javascript刪除一個html元素節(jié)點(diǎn)的方法,可通過獲取父節(jié)點(diǎn)再查找并刪除子節(jié)點(diǎn)來實(shí)現(xiàn)該功能,具有一定的參考借鑒價值,需要的朋友可以參考下
2014-12-12
JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲完整實(shí)例
飛機(jī)大戰(zhàn)坦克是一款小游戲，相信很多朋友都有玩過，由于最近在深入學(xué)習(xí)Javascript，所以想著用利用Javascript來實(shí)現(xiàn)這個游戲，下面這篇文章主要介紹了如何利用JavaScript原生編寫《飛機(jī)大戰(zhàn)坦克》游戲,需要的朋友可以參考下
2017-01-01
利用JavaScript實(shí)現(xiàn)的10種排序算法總結(jié)
這篇文章主要介紹了利用JavaScript實(shí)現(xiàn)的十種排序算法，主要介紹了冒泡，選擇，插入，希爾，歸并，快速，堆排，計數(shù)，桶排和基數(shù)，有感興趣的小伙伴可以參考閱讀本文
2023-05-05
微信小程序仿抖音短視頻切換效果的實(shí)例代碼
這篇文章主要介紹了微信小程序仿抖音短視頻切換效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-06
Web?Components使用生命周期回調(diào)函數(shù)實(shí)例詳解
這篇文章主要為大家介紹了Web?Components使用生命周期回調(diào)函數(shù)實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
利用OpenLayer繪制扇形的示例代碼
這篇文章主要介紹了如何利用OpenLayer實(shí)現(xiàn)繪制扇形，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)OpenLayer有一定的幫助，感興趣的可以了解一下
2022-06-06
JS刷新父窗口的幾種方式小結(jié)(推薦)
下面小編就為大家?guī)硪黄狫S刷新父窗口的幾種方式小結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
微信小程序文字顯示換行問題
這篇文章主要介紹了微信小程序文字顯示換行問題，文中給出了解決方案,需要的朋友可以參考下
2019-07-07
Three.Js實(shí)現(xiàn)看房自由小項目
目前隨著元宇宙概念的爆火，THREE技術(shù)已經(jīng)深入到了物聯(lián)網(wǎng)、VR、游戲、數(shù)據(jù)可視化等多個平臺，今天我們主要基于THREE實(shí)現(xiàn)一個三維的VR看房小項目，感興趣的朋友跟隨小編一起看看吧
2022-10-10
JavaScript實(shí)現(xiàn)水印效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用canvas實(shí)現(xiàn)添加水印的效果，文中的示例代碼簡潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-05-05