클래스명으로 CSS 변경 시 Cannot set property 뜨는 이유

Cannot set property 에러

Uncaught TypeError: Cannot set property
ClassName() 로 Element 요소 가져올 때 해당 에러가 출력됩니다.
자바스크립트로 CSS 변경할 때 나올 수 있는 에러입니다.
결론적으로 이 에러가 발생하는 이유는 클래스명[0] 와 같이 사용해야 해결할 수 있게됩니다.

예제 코드

<div class="e">
	<div class="a" id="b"></div>
</div>
<input type="button" value="버튼" onclick="cha()">

에러가 발생하는 스크립트 코드

function cha()
{
	document.getElementsByClassName("a").style.width="100px";
	document.getElementsByClassName("a").style.height="100px";
	document.getElementsByClassName("a").style.backgroundColor="red";
}

클래스명으로 실행하면 적용이 안되는 문제가 발생합니다

ID 값 처리는 잘 된다

function cha()
{
	document.getElementsById("b").style.width="100px";
	document.getElementsById("b").style.height="100px";
	document.getElementsById("b").style.backgroundColor="red";
}

혹시나 ID 로 처리해보니 정상적으로 잘 처리가 됩니다.
클래스명으로 처리가 안되는 이유는 인덱스 값을 써야 제대로 탐지를 할 수 있습니다.

function cha()
{
	document.getElementsByClassName("a")[0].style.width="100px";
	document.getElementsByClassName("a")[0].style.height="100px";
	document.getElementsByClassName("a")[0].style.backgroundColor="red";
}

뒤에 [0] 을 붙이면 해결할 수 있게 됩니다.

query 선택하려면 querySelector

<ul class="menu_choice">
    <li class="all_btn selected" data-category="all">
        <span>전체</span>
    </li>
    <li class="update" data-category="update">
        <span>업데이트</span>
    </li>
    </li>
</ul>

var selectedElement = document.querySelector('.menu_choice .selected').getAttribute('data-category');

단지 선택만 한다면 querySelector 를 활용할 수 있습니다.

참조

• https://moalgong.tistory.com/25