자바스크립트 버튼 클릭시 색 변경

[Namtaemin-Korea]

day/night 모드 변경 버튼 클릭시

태그의 색상들만 변경이 되고 나머지 텍스트의 색상은 변경이 되지 않습니다 ㅜㅜ 정말 기초적인 것이지만 검색을 해보아도 도통 작동되지 않아 질문드립니다..!

li태그 내의 a태그, h1태그에 접근하는 방법이 궁금합니다!

시도해본 방법
document.querySelecetorAll(a).color = "white";
document.getElmentId(grid).color = "white";
(문법적으로 어디서 잘못된 것인지도 궁금합니다..!)

사용중인 운영체제 : Visual studio Code

코드

[Haytsir]

우선 적용하기 편하고, 이해하기 쉬운 방법을 소개해드릴게요
버튼을 누를 때 마다 HTML에서 여러 많은 요소를 포함하는 부모 태그(body태그)에다
페이지를 어둡게 그려야하는지 아닌지를 나타내는 class를 추가하고 빼는 방법입니다.

예시

<input type="button" value="night" onclick="
	var target = document.querySelector('body');
	if (target.classList.toggle('dark'))
	{
		// 페이지를 어둡게 했을 때 실행할 코드
		// 별도의 JavaScript단위의 적용이 필요없다면 if문 자체를 작성하지 않아도 상관없습니다.
		console.debug('페이지가 어두워짐!')
	}
	else
	{
		// 페이지를 밝게 했을 때 실행할 코드
		// 별도의 JavaScript단위의 적용이 필요없다면 if문 자체를 작성하지 않아도 상관없습니다.
		console.debug('페이지가 밝아짐!')
	}"
>

이렇게 하면, 버튼을 누를 때 마다 body 태그에 dark라는 class가 추가되거나 사라집니다

이제 CSS를 통해 이 class에 맞춰 페이지가 어떻게 변할 지 작성하시면 됩니다.

a{
	color: black;
	text-decoration: none;
}

body.dark {
	background-color: black;
	color: white;
}

body.dark a {
	color: white;  
}

이제 기본적으로 a태그는 black 색상을 가지지만,
dark라는 class를 가진 body태그의 하위에 속하게 되는 순간 white 색상을 가지게 됩니다.
이제 간단히 css 코드를 수정하는 것 만으로 원하시는 기능을 대부분 표현할 수 있습니다.

질문하신 것 처럼 js 코드에서 스타일을 적용하려면

document.querySelectorAll('a').forEach((e) => { e.style.color = "white" })
document.getElmentId('#grid').style.color = "white"

위 처럼 작성하셔야 합니다.

작성하신 코드가 왜 의도대로 동작하지 않았는가 하면,
보통 기본적으로 자식 요소(Child Elements)들은 부모 요소(Parent Elements)의 스타일(Style)을 상속(inherit)하는 것이
기본 값입니다.

따라서 밝은 페이지 상태에서 어두운 페이지 상태로 변환했을때, 별도로 스타일을 적용하지 않은 본문의 글자들은 부모의
color: white 스타일을 물려받아 흰 색으로 표현됐고

css단위에서 a태그에 color: black을 적용했기 때문에
이 스타일을 적용받아 어두운 페이지로 전환했을 때에도 부모에게서 스타일을 상속받지 않았습니다.

질문하신 내용 중 li태그 내의 a태그, h1태그에 접근하는 방법은

query selecetor 메서드를 이용한다면

li a (a태그가 어떻든 간에 상위 태그 중 li태그가 있는 경우)
li > a (a태그가 li태그의 바로 밑에 있는 경우)

로 접근할 수 있고,

li 태그를 얻어낸 후에 li태그.children()등을 통해서도 접근 가능합니다.