js 기본 특징

1.js는 html 컨텐츠를 바꿔준다
- id = "demo"
를 먼저 사용한 후, 그 아이디 값을 가져와서 컨텐츠를 변경한다

아이디 값을 가져오는 문장은 getElementById("demo") 

<p id = "demo"> js 컨텐츠 바꿈</p>

<button type="button" onclick="document.getElementById("demo").innerHTML="hello js"">click</button>


2.js는 html 메모리 값을 바꿀 수 있다.

https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

이미지에 src="pic_bulboff.gif"를 넣고
오른쪽은 document.getElementById('myImg').src='pic_bulboff.giff' 를 넣어준다
왼쪽은 document.getElementById('myImg').src='pic_bulbon.gif' 로 불들어오는 이미지를 넣어서
값을 바꿔준다.

3.js는 html 스타일을 바꿀 수 있다(css)

document.getElementById("demo").style.fontSize="35pc";

이런식으로 아이디 값을 가져온 후 style.fontSize 를 사용하여 바꿔준다

4.js는 html 요소를 숨기거나 보여줄 수 있다.

document.getElementById("demo").style.display = "none";

display:none를 이용하여 숨길 수 있다. 그런데 숨겨진 문서를 display='block'을 이용하여 다시 
보여 줄 수 있다. 

<p id="demo" style="display:none"> 문서 숨기기 </p>

<button type = "button" onclick="document.getElementById('demo").style.display='block'">click me</button>

 

 

display 종류를 따로 정리해 보았다