javaScript - backgroundColor hex - rgb

목표

• css로 지정되어 있는 background-color 값 javaScript를 통해 받아와 변경하는 토글 버튼 만들기

문제 인식

[css]
.container {
	background-color: #ccc;
}

[js]
const themeToggle = () => {
const containerItem = document.querySelector(".item:nth-child(2)");

if (containerItem.style.backgroundColor === "#ccc") {
	bgColor = "#000";
} else {
	bgColor = "#ccc";
}
containerItem.style.backgroundColor = bgColor;
};

로 작성하자 containerIte.style.background 값을 가져오지 못하는 것을 확인했다.

---

해결

기본적으로 js에서 backgroundColor를 rgb값으로 가져오는 것을 파악하고,
hex 값을 가져오기 위해서는 'toString()' 메서드와 'slice()' 메서드를 사용해야 한다고 한다.

-> backgroundColor 값을 가져와서 RGB값을 추출하고, 각 RGB값을 16진수로 변환하여 헥사코드로 조합한 후 출력하는 방식

hex 값이 익숙하긴 하지만, 위의 방식보다 설정된 hex 값을 rgb 값으로 바꾸는 것이 시간적으로도, 코드 효율을 위해서도 맞다는 판단을 했다.

수정한 코드는 아래와 같다.
rgb를 js 변수에 저장하는 과정에서 따옴표를 꼭 써야 함을 주의하자.

[js]
const themeToggle = () => {
const containerItem = document.querySelector(".item:nth-child(2)");

if (containerItem.style.backgroundColor === "rgb(204, 204, 204)") {
	bgColor = "rgb(0, 0, 0)";
} else {
	bgColor = "rgb(204, 204, 204)";
}
containerItem.style.backgroundColor = bgColor;
};