DOM&EVENT, CSS style, class 제어 _ 코딩앙마

유튜브 코딩앙마 영상을 보고 정리한 내용입니다.

DOM 으로 html 요소에 스타일을 적용할 수 있습니다.

//html 
<div id="box">BOX</div>

//script
const box = document.getElementById("box");

box.style.backgroundColor = "red";
box.style.color = "#fff";
box.style.width = "100px";
box.style.border = "10px solid #000"

//css 속성 그대로 적어주고 싶다면
box.style["margin-left"] = "30px";

해당 태그에 css 속성을 담은 클래스 이름을 붙여주는 방식을 자주 사용합니다.

//css
.bg-red {
	color: red; 
}

//script
box.className = 'bg-red'
box.className = 'bg-blue'

className 은 기존 클래스 명을 리셋하므로 잘 사용하지 않습니다. 실제로 자주 사용하는 것은 classList 입니다.

//html 
<div id="box" class="box bg-red">BOX</div>
// 이렇게 클래스가 두개 붙을 때

box.classList
// 하면 해당 클래스 관련 배열처럼 보이는 데이터 묶음과 사용할 수 있는 메소드들을 제공

box.classList.add('txt-white'); // 클래스 추가
box.classList.remove('txt-white'); // 클래스 제거
box.classList.add('bg-green', 'txt-yellow') // 클래스 여러개는 쉼표로 구분해서 추가
box.classList.replace('bg-red', 'bg-blue'); // 첫번째 클래스 네임을 두번째 클래스 네임으로 수정

toggle 은 해당 클래스가 없으면 넣어주고 있으면 제거해 주어서 편리합니다.

setInterval(() => {
	box.classList.toggle('bg-red');
}, 1000)
// 1초에 한번씩 태그를 넣었다 뺐다 해준다.

클릭으로 발생한 이벤트의 target 에 클래스를 넣거나 빼주는 예제입니다.

//html 
<ul id="color">
	<li>Red</li>
</ul>

//script
const color = document.getElementById("color");

color.onclick = function (e) {
	const target = e.target;  // 클릭해서 발생한 이벤트의 target 
	if (target.tagName !== "LI") return;
	target.classList.toggle("txt-pink"); 
	// 그 타겟에 해당 클래스가 없으면 넣어주고 있으면 빼주는
};