javascript : 스타일 속성 이름 차이점

"왜 스타일 시트에서 사용하던 스타일 속성 이름을 그대로 입력하면 안될까?"

 

자바스크립트는 특수 기호 '-'을 식별자에 사용할 수 없으므로 다음처럼 입력하면 오류가 발생한다.

 

var header = document.getElementById('header');
header.style.background-color = 'red';

 

따라서 '-'으로 연결된 속성은 다음과 같은 방식으로 사용한다.

var header = document.getElementById('header');
header.style.backgroundColor = 'red';

 

특수 기호'-'으로 끊긴 단어의 첫 글자를 대문자로 변경하면 됩니다. 

 

스타일 시트의 스타일 속성	자바스크립트의 스타일 식별자
background-image	backgroundImage
background-color	backgroundColor
box-sizing	boxSizing
list-style	listStyle

 

문자열로 스타일 속성에 접근할 때는 다음 두 가지 방법을 모두 사용할 수 있습니다.

document.body.style['backgroundColor'] = 'red';
document.body.style['background-color'] = 'red';