[FC] DOM 스타일링 / DOM 속성 제어 Day-10

ex) index.html

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

<script>main.js</script>

ex) main.js

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

box.addEventListener("click", (e) => {
	e.currentTarget.style.backgroundColor = "red";
    e.currentTarget.style.width = 200+"px";
});

e.currentTarget.style.backgroundColor = "red";
을 통해서 박스의 색상을 변경할 수 있다.

e.currentTarget.style.width = 200+"px";
을 통해서 width 값을 변경할 수 있다.

<div class="box2">
	
</div>

<script>main.js</script>

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

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

getComputedStyle을 통해서 css를 불러올 수 있다.
구체적으로 결과를 얻고 싶다면, [""] 또는 .(카멜케이스)를 통해서 확인할 수 있다.

DOM 속성 제어하기

속성이란 a 태그 안쪽에 있는 href, target, title 등을 얘기한다.

<a href="https://kakao.gg" target="_blank" title="카카오지지로 이동">카카오지지</a>

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

const a_href = a.getAttribute("href");
console.log(a_href);
// https://kakao.gg 출력

const a_title = a.getAttribute("title");
console.log(a_href);
// 카카오지지로 이동 출력

a.setAttribute("href", "https://naver.com");
a.setAttribute("target", "_self");
a.setAttribute("title", "네이버로 이동");
a.innerText = "네이버";
// a.innerText를 통해서 기존 카카오지지 값을 네이버로 변경한다.