JS-DOM 스타일링(css)

DOM 스타일링

ex)

<div class="box"></div>

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

box.addEventListener("click, e => {
	e.currentTarget.style.backgroundColor = "hotpink";                     
})

위의 경우 box의 배경을 "hotpink"로 css를 바꿀 수 있음

---

해당 요소에 있는 css 값 확인하기

box2.addEventListener("click", e => {
	const style = getComputedStyle(e.currentTarget)
    console.log(style);
})

ex)배경색을 확인하고 싶을 떄

box2.addEventListener("click", e => {
	const bg = getComputedStyle(e.currentTarget).backgroundColor
    console.log(bg);
})

또는

box2.addEventListener("click", e => {
	const bg = getComputedStyle(e.currentTarget).["background-color"]
    console.log(bg);
})

ex2) 너비값을 확인하고 싶을 때.

box2.addEventListener("click", e => {
	const wid = getComputedStyle(e.currentTarget).width
    console.log(wid);
})