반응형

자바스크립트 개발 환경은 Microsoft Visual Studio 2015 버전 HTML 기능 및 Chrome을 이용하고 있습니다.





getElementById() 메소드는 id를 찾아 그 부분에 해당하는 HTML 요소에 내용물을 바꿔주는 자바스크립트 메소드이다.


바로 예를들어보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
        
    </head>
 
    <body>
        <h2> getElementById </h2>
 
        <p id ="demo">getElementById는 이부분 내용을 바꿀 수 있게 해준다.</p>
 
        <button type="button" onclick='document.getElementById("demo").innerHTML = "이렇게!"'>Click</button>        
    </body>
</html>
Crocus


클릭하시면 결과 화면을 확인 할 수 있습니다




이때 자바스크립트 특성상 ' '를 이용하거나 " "를 이용하거나 아무거나 이용해도 무관하다.





이번에는 또 다른 속성도 변경이 가능한 것을 확인해보자.


getElementById를 통해 텍스트가 아닌 이미지가 있는 콘텐츠도 바꿀 수 있다.



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>
    <head>
        <title>test title</title>
        
    </head>
 
    <body>
        <h2> Another Star Test </h2>
        
        <p>자바스크립트는 HTML 속성도 변경가능하다.</p>
        <p>이번에는 이미지를 변경시키는 방법을 이용해보려 한다.</p>
        
        <button onclick="document.getElementById('star').src='https://t1.daumcdn.net/cfile/tistory/9960343359BF4D400C'">별 돌리기1</button> 
        <img id="star" src="https://t1.daumcdn.net/cfile/tistory/9960343359BF4D400C" style="width:100px">
 
        <button onclick="document.getElementById('star').src='https://t1.daumcdn.net/cfile/tistory/9983E73359BF4D4104'">별 돌리기2</button>
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus



클릭하시면 결과 화면을 확인 할 수 있습니다





폰트도 변경이 가능하다. 즉, 매우 다양한 스타일들을 적용 시킬 수 있기도 하다는 의미이다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
        
    </head>
 
    <body>
        <h2> Font Test </h2>
        <p>getElementById를 이용하여 Font를 변경해보자.</p>
    
        <p id="font">나는 실험대상입니다..</p>
        <button type="button" onclick="document.getElementById('font').style.fontSize='30px'">Size up!!</button>
        <button type="button" onclick="document.getElementById('font').style.fontSize='15px'">Size down!!</button>
    </body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus



클릭하시면 결과 화면을 확인 할 수 있습니다





display를 이용하면 내용물을 숨기거나 나타낼 수 있다.


이 기능을 이용하여 블로그의 접기 /  펼치기 기능을 구현 할 수 있다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
    <head>
        <title>test title</title>
        
    </head>
 
    <body>
        <h2> Font Test </h2>
        <p>getElementById를 이용하여 Font를 변경해보자.</p>
   
        <p id="hideme">나를 숨겨주세요</p>
        <button type="button" onclick="document.getElementById('hideme').style.display='none'">Click Me :: Hide</button>
        <button type="button" onclick="document.getElementById('hideme').style.display='block'">Click Me :: Appear</button>
    
</body>
</html>
 
//                                                       This source code Copyright belongs to Crocus
//                                                        If you want to see more? click here >>
Crocus


클릭하시면 결과 화면을 확인 할 수 있습니다


















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

'Basic > JavaScript' 카테고리의 다른 글

자바스크립트 출력 메소드 사용 방법  (0) 2017.09.19
script 사용 기초, .js파일 호출 기초  (0) 2017.09.19
자바스크립트 옵션 객체 초기화 방법  (0) 2017.08.31
자바스크립트 함수를 이용한 객체 생성  (0) 2017.08.28
자바스크립트 객체 이용방법 및 this 키워드 이용방법  (0) 2017.08.20

티스토리툴바