1. css를 직접적으로 수정하기

style 키워드를 사용하시면 됩니다.

<div id="box">박스</div>

다음 div 박스에 스타일을 적용시켜보겠습니다.

const box = document.querySelector("#box");

//box.style.스타일 속성
box.style.width = 100px;

다음과 같이 box의 너비를 100px로 만들었습니다. 이렇게 height, background-color 등등 원하는 스타일 속성을 적용시킬 수 있습니다.

box.style.height = 100px;
box.style.backgroundColor = "blue"; //카멜 케이스

다만 원래 “-”가 들어갔던 스타일 속성은 camelCase로 바꾸어 써주어야 합니다.

//background-color -> backgroundColor

위와 같이 말이죠.

2. css를 간접적으로 수정하기

css를 간접적으로 수정한다는 것은 html요소 값의 class나 id를 바꾸는 것을 의미합니다.

아래 예시를 보겠습니다.

#index.html

<div id="box">박스</div>

이 박스를 안보이게 하고 싶습니다. 그러기 위해서는 css 속성 display:none; 을 주어야 합니다.

#index.css

.hidden {
	display:none;
};

그래서 다음과 같이 css 파일을 만들었습니다. 이 상태에서 만약 <div id="box">박스</div>에 hidden이라는 class를 준다면 박스가 안보이게 되겠죠?

이것을 javascript로 구현해보도록 하겠습니다.

const box = document.querySelector("#box");
box.classList.add("hidden"); //classList.add()를 통해 hidden이라는 클래스 추가

classList.add()를 통해 hidden이라는 클래스를 추가했습니다. 이제 box는 hidden이라는 클래스에 따라 css를 적용받아 화면에 보이지 않게 될 것입니다.