JavaScript) 자바스크립트로 HTML요소 작업(기능).

자바스크립트는 웹페이지의 요소(HTML, CSS)들을 가져와 작업을 하며, 

자바스크립트를 사용하기 위해서는 <script>태그 안에 적거나 <button>에 onclick으로 연결해야 한다. 

 

1. HTML id를 가져와 값 변경. 

**요소에 접근해서 가져오는 방법을 모른다면? -> https://luanaeun.tistory.com/74

ex) "제목" 이였던 글자가 버튼을 누르면 title로 바꾼다.

<h1 id="title">제목</h1>
<button onclick='document.getElementById("title").innerHTML="title"'>번역</button>

 

 

2. CSS요소에 접근하여 변경.

<!-- 글씨 색상 변경 -->
<div id="smallText">글씨 색상 변경</div>
<button onclick="document.getElementById('smallText').style.color='purple'">색상변경</button>

 

 

3. 요소 숨기고 보이기

<!-- 요소 숨기기 -->
<div id="hide">비밀 텍스트</div>
<button onclick="document.getElementById('hide').style.display='none'">비밀 숨기기</button>
	
<!-- 요소 다시 보기 -->
<button onclick="document.getElementById('hide').style.display='block'">비밀 보기</button>

 

 

4. 빈 요소에 값 넣기

<!-- 빈 요소에 값 넣기 -->
<div id="bin"></div>
        <!-- ↑요기 값이 없는데 자바스크립트에의해 화면에 값이 나온다. -->
            
 <script>
	document.getElementById("bin").innerHTML="값 넣기";
 </script>

※ 주의! <script>가 접근하고자 하는 요소보다 위에 있으면 접근하지 못한다. 

 

 

이 외에도 이미지 바꾸기, 글씨 크기 변경 등

자바스크립트는 HTML요소에 접근하여 다양한 기능을 수행한다.  

 

1~4번까지의 결과