getElementsByName
페이지 정보
작성자 서방님 댓글 0건 조회 208회 작성일 12-09-20 16:14본문
설명
ID 속성을 가져올 때, 자주 쓰는 태그가 'getElementById'이다.
하지만 'getElementById'는 하나의 ID만 가져올 수 있다.
복수의 ID 속성을 가져올 때는 'getElementsByName'을 배열로 사용한다.
예제
같은 ID일 경우 같은 스타일이 동시에 적용되도록 프로그램된 예제이다.
<style type="text/css">
.TextStyle{font-size:12px; color:#555555; padding: 5px 5px 0 5px; width:78px; line-height:14px;}
</style>
<script type="text/javascript">
//마우스 오버
function Text_MouseOver(divName){
if(divName != "") {
var divObj = document.getElementsByName(divName);
for(var i=0; i<divObj.length; i++) {
divObj[i].style.fontSize = "12px";
divObj[i].style.color = "#000000";
divObj[i].style.padding = "5px 5px 0 5px";
divObj[i].style.fontWeight = "bold";
divObj[i].style.width = "78px";
divObj[i].style.lineHeight = "14px";
}
}
}
//마우스 아웃
function Text_MouseOut(divName){
if(divName != "") {
var divObj = document.getElementsByName(divName);
for(var i=0; i<divObj.length; i++) {
divObj[i].style.fontSize = "12px";
divObj[i].style.color = "#555555";
divObj[i].style.padding = "5px 5px 0 5px";
divObj[i].style.fontWeight = "";
divObj[i].style.width = "78px";
divObj[i].style.lineHeight = "14px";
}
}
}
</script>
<div id="Text_001" onMouseOver="Text_MouseOver('Text_001');" onMouseOut="Text_MouseOut('Text_001');" class="TextStyle">텍스트_001</div>
<div id="Text_002" onMouseOver="Text_MouseOver('Text_002');" onMouseOut="Text_MouseOut('Text_002');" class="TextStyle">텍스트_002</div>
<div id="Text_001" onMouseOver="Text_MouseOver('Text_001');" onMouseOut="Text_MouseOut('Text_001');" class="TextStyle">텍스트_001</div>
<div id="Text_002" onMouseOver="Text_MouseOver('Text_002');" onMouseOut="Text_MouseOut('Text_002');" class="TextStyle">텍스트_002</div>
<div id="Text_001" onMouseOver="Text_MouseOver('Text_001');" onMouseOut="Text_MouseOut('Text_001');" class="TextStyle">텍스트_001</div>
<div id="Text_003" onMouseOver="Text_MouseOver('Text_003');" onMouseOut="Text_MouseOut('Text_003');" class="TextStyle">텍스트_003</div>
<div id="Text_002" onMouseOver="Text_MouseOver('Text_002');" onMouseOut="Text_MouseOut('Text_002');" class="TextStyle">텍스트_002</div>
댓글목록
등록된 댓글이 없습니다.
