javaScript - backgroundColor null

목표

container의 backgroundColor를 가져와, 버튼 클릭 시 다크 모드를 구현할 수 있는 토글을 만들고자 한다.

문제 인식

• js 토글 버튼으로 container의 배경색을 바꾸기 위해 css로 background-color 지정된 container.style.backgroundColor를 변수로 저장하는데 첫 값이 null로 반환

해결

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;
};

style.backgroundColor에서 null 값이 처음 반환되는 이유는, 'style' 속성에서 직접 지정한 CSS 스타일을 가져오는 것이 아니라, 해당 요소의 inline 스타일을 가져오려고 시도하기 때문임을 파악.

이 경우 요소에 기본값으로 지정된 스타일을 가져오기 위해서, 'window.getComputedStyle()' 메소드를 사용

따라서 수정된 코드는 다음과 같다.

const themeToggle = () => {
  const containerItem = document.querySelector(".item:nth-child(2)");
  let bgColor = window.getComputedStyle(containerItem).getPropertyValue("background-color");
  if (bgColor === "rgb(204, 204, 204)") {
    bgColor = "rgb(0, 0, 0)";
  } else {
    bgColor = "rgb(204, 204, 204)";
  }
  containerItem.style.backgroundColor = bgColor;
};