티스토리 뷰
오늘은 Javascript의 getElementById()를 사용한 예제를 한번 보도록 하겠습니다.
실행하면 아래와 같이 나옵니다.
링크2를 누르면 아래와 같이 나옵니다.
그러면 이제 소스를 한번 살펴볼까요?
실행화면 |
이 예제는 링크1을 누르면 링크1을 숨기고 링크2를 보이게 하고
링크2를 누르면 링크1을 보이게 하고 링크2를 숨기는 예제입니다.
실행하면 아래와 같이 나옵니다.
링크2를 누르면 아래와 같이 나옵니다.
소스 보기 |
<html> <head> <script type="text/javascript"> function fn_onload() { document.getElementById('link1').style.visibility = "hidden"; document.getElementById('link2').style.visibility = "visible"; } function link1_onclick() { document.getElementById('link1').style.visibility = "hidden"; document.getElementById('link2').style.visibility = "visible"; } function link2_onclick() { document.getElementById('link1').style.visibility = "visible"; document.getElementById('link2').style.visibility = "hidden"; } </script> </head> <body onload="fn_onload();"> <p>이 예제는 링크1을 누르면 링크1을 숨기고 링크2를 보이게 하고<br/> 링크2를 누르면 링크1을 보이게 하고 링크2를 숨기는 예제입니다.</p> <a href="#" id="link1" onclick="javascript:link1_onclick();">링크1</a> <a href="#" id="link2" onclick="javascript:link2_onclick();">링크2</a> </body> </html>
'IT 이야기 > 프로그래밍' 카테고리의 다른 글
당신이 사용하고 있는 브라우저에서 HTML5를 사용한다면 점수는? (0) | 2011.12.07 |
---|---|
[HTML 쉽게 이해하기 강좌] - <input> 태그 (0) | 2011.12.07 |
[HTML 쉽게 이해하기 강좌] - <form> 태그 (0) | 2011.12.07 |
[HTML 쉽게 이해하기 강좌] - Element Level에 대해서 (0) | 2011.12.05 |
[HTML 쉽게 이해하기 강좌] - DOCTYPE에 대해서 (0) | 2011.12.05 |
[C언어] 함수 rand(), srand() 쉽게 이해하기 (55) | 2011.12.05 |
[Javascript] 홈페이지에 현재의 년월일을 이미지로 된 숫자로 표시하는 자바스크립트 소스 (1) | 2011.12.03 |
[HTML 쉽게 이해하기 강좌] - <h1>~<h6> 태그에 대해서 (0) | 2011.12.03 |
[HTML 쉽게 이해하기 강좌] - <head> 태그에 대해서 (0) | 2011.12.02 |
[HTML 쉽게 이해하기 강좌] - HTML 문서의 기본 구조 (0) | 2011.12.02 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
- W3Schools Online Web Tutorials
- 구차니의 잡동사니 모음
- [IT]블로거팁닷컴
- 비앤아이님의 블로그
- Blog Suspect
- 즐거운하루 blog
- zinicap의 검색엔진 마케팅(SEM)
- 머니야머니야님의 블로그
- [Friend] AtinStory
- [기타배우기]해브원 박스
- [웹표준] SINDB.com
- 해커 C 이야기
- [애드센스] 길라잡이
- 정순봉의 IT SCHOOL
- 씨디맨의 컴퓨터이야기
- 2proo Life Story
- 못된준코의 세상리뷰
- [IT강좌] 정보문화사
- IN 대전
- 에우르트는 나쁜남자 -_-
- 씬의 싱크탱크
- 엔돌슨의 IT이야기
- 진이늘이
- 'Cooltime'의 블로그
- 후이의 Tistory
- Soulstorage
- 앤드&엔드의 블로그
- June Blog
- 노지의 소박한 이야기
- gbWorld
- 인터넷 속 나의 생각
- HarshNix
- ART of WEB
- 녹두장군 - 상상을 현실로
TAG
- 리뷰
- HTML
- 성공
- MBTI 검사
- 안드로이드 어플
- 소스코드
- 소스
- 프로그래밍
- 모토로이
- It
- 강좌
- 스마트폰
- C언어
- 인터넷 익스플로러
- C
- php
- 프로그래밍 문제
- 안드로이드
- JavaScript
- 효과음
- 인터넷
- 안드로이드 어플 추천
- 예제 소스
- MBTI 테스트
- C언어 문제
- C언어 소스
- 강의
- MBTI
- MBTI 자료
- MBTI 강좌
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
글 보관함