ClassName()으로 Element요소를 가져올 때 유의점

자바스크립트로 CSS를 변경하려고 하는데,

Uncaught TypeError: Cannot set property 라는 메시지에 괴롭혀지고 있다면,

그리고 ClassName()으로 Element요소를 가져오고 있었다면?

혹시 나와 같은 실수가 아닐까?

 

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

 

위와 같은 단순한 HTML에

 

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

 

ClassName으로 요소를 가져와서 CSS를 변경하는데 안된다.

 

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

 

혹시나 해서 Id로 요소를 가져오니 잘된다.

 

getElements의 s에 한번 당한 기억이 떠올랐다

그래서 찾아보았다. ClassName의 사용법

 

인덱스 값을 써야한단다. 아.

 

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

 

잘된다.

 

결론

ClassName() 사용시 유의하자 : 인덱스~ 그리고 s~

 

- 21.06.16 추가 : setAttribute를 이용하면 위의 스타일태그 모두를 한줄로 쓸 수 있다.

 

function cha()
{
	document.getElementsByClassName("a")[0].setAttribute("style","width:100px;height:100px;background-color:red;");
}