아래 코드를 복사해서 사용하세요. 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"> <br>/* 스타일 재설정 */ <br>* { margin:0; padding:0;} <br>. input_ocurrent { 패딩:2px; 테두리:1px 솔리드 #DDD; 배경:#FFF;} <br>.input_ocurrent:hover, .input_ocurrent:focus { 테두리:1px 솔리드 #444; 배경:#DDD;} <br>.input_current { 패딩: 2px; 테두리: 1px 솔리드 #444; 배경:#DDD;} <br> <br> //span 태그 세트 가져오기 <br>varspanzone = document.getElementsByTagName("span") <br>//span 태그 수 가져오기(for에 넣으면 계산이 반복됨) <br> varspanlength=spanzone.length ; <br>var inputzone;//필요한 범위 <br>for(var i=0;i<spanlength;i ) <BR>{ <BR>//찾고 있는 범위 가져오기 for<BR>if (spanzone[i].className==elementID) <BR>{ <BR>inputzone=spanzone[i] <BR>} <BR>} <BR>//span의 입력 태그 세트 가져오기 tagged<BR>var inputTx =inputzone.getElementsByTagName("input"); <BR>//span의 입력 세트 수(반복 계산을 방지하기 위해 별도로 작성) <BR>var inputLength=inputTx.length <BR>for; (var i=0;i <inputLength; i ) { <BR>//동적으로 onmouseover 이벤트 추가: 마우스가 입력 위로 이동할 때 입력 클래스가 input_ocurrent인지 확인합니다. 그렇다면 onmouseover 이벤트를 추가하고 같은 방법으로 나가세요 <BR>if (inputTx[ i].className ="input_ocurrent"){ <BR>inputTx[i].onmouseover=function() { <BR>this.className ="input_current" <BR>} <BR>inputTx[i].onmouseout= function() { <BR>this.className ="input_ocurrent"; <BR>} <BR>} <BR>} <BR>} <BR>window.onload = function() { <BR>displayInput("input_zone" ) <BR> < ;/span>
