공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/HTML

DOM example

serpiko 2013. 10. 13. 21:43

DOM example

 

DOM을 사용하여 전구이미지를 토글하여 바꾸는 예)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("pic_bulbon"))
  {
  element.src="pic_bulboff.gif";
  }
else
  {
  element.src="pic_bulbon.gif";
  }
}
</script>
<img id="myimage" on_click="changeImage()" border="0" src="pic_bulboff.gif" width="100" height="180">
<p>Click to turn on/off the light</p>

</body>
</html>

 

결과)

 

* match : http://msdn.microsoft.com/ko-kr/library/7df7sf4x(v=vs.94).aspx

* source : http://www.w3schools.com/

 

저작자표시 비영리 변경금지

'■ 프론트엔드 ■ > HTML' 카테고리의 다른 글

document.getElementsByTagName() - 태그 접근  (0) 2013.10.13
document.getElementById() - ID 접근  (0) 2013.10.13
innerHTML  (0) 2013.10.13
document.getElementsByName() - name접근  (0) 2013.10.13
getElementById() - Method  (0) 2013.10.13
댓글