JS] 자바스크립트에서 css 변경하기

모든 style 관련해서는 CSS 안에 있는게 좋지만, 

만약 유저가 클릭했을 때 백그라운드 색을 변경하고 싶다면 

이럴 때는 자바스크립트와 style property를 이용한다. 

 

 

 

그럼, DOM을 이용해서 자바스크립트로 css style을 변경해보자.

 

Style Properties of every DOM object 찾아보기 

https://www.w3schools.com/jsref/dom_obj_style.asp

 

 

1) 콘솔에서 DOM으로 원하는 element를 선택한 후 

.style.property 로 써준다.

 

2) value는 "string" 스타일로 써준다. "red" "10rem"

 

 

 

 

li 안에 있는 a 태그의 색을 빨간색으로 바꿔보기 

 

 

 

li 안에 있는 a 태그의 폰트 사이즈를 10rem으로 바꿔보기 

css에서는 font-size로 대쉬를 이용해서 썼지만

여기서는 자바스크립트 스타일 fontSize로 써준다.

300

 

 

 

h1에 padding 5%주기

 

 

 

h1 안보이게 하기 

document.querySelector("h1").style.visibility ="hidden";
"hidden"

 

 

 

 

Click Me 버튼 노란색으로 바꾸기

document.querySelector("button").style.backgroundColor = "yellow";
"yellow"