요소노드의 스타일을 설정하는 2가지 방법
1. 인라인 class속성
2. 인라인 style속성
자바스크립트로 2가지 방법 모두 설정이 가능하지만 주로 className프로퍼티를 사용하며 style프로퍼티는 left, top같은 동적으로 계산된 값을 설정하는데 사용하는 것이 좋다.
CSS로 만든다음 자바스크립트로 클래스속성을 설정하는 방법이 유연성있어 유지보수에 좋다.
let top = /* 복잡한 계산식 */;
let left = /* 복잡한 계산식 */;
elem.style.left = left; // 예시: '123px', 런타임으로 좌표를 계산할 수 있습니다.
elem.style.top = top; // 예시: '456px'자바스크립트로 style속성을 제어하는 것은 위와 같은 경우에 제한하는 것이 좋다.
className과 classList
<body class="main page">
<script>
alert(document.body.className); // main page
</script>
</body><body class="main page">
<script>
// 클래스 추가
document.body.classList.add('article');
alert(document.body.className); // main page article
</script>
</body>elem.classList.add/remove("class") – class를 추가하거나 제거
elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가
elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환
자바스크립트로 스타일설정시 주의사항
background-color => elem.style.backgroundColor
z-index => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth카멜 표기법을 사용해 이름 짓는다.
style프로퍼티 재지정하기
elem.style.display="none"로 프로퍼티를 설정한후 처음상태로 되돌리고 싶을때 처음상태는 미지정상태이었으므로 delete elem.style.display와 같이 프로퍼티를 삭제하면 될것으로 생각할 수 있다.
그러나 elem.style.display = "" 같이 빈 문자열을 할당해주어야 하는 규칙이 있으므로 유의하자.
style프로퍼티는 객체이기때문에 div.style="color: red; width: 100px"와 같이 속성처럼 값을 설정할 수 없다.
<div id="div">버튼</div>
<script>
// cssText를 사용하면 'important' 같은 규칙도 설정할 수 있습니다.
div.style.cssText=`color: red !important;
background-color: yellow;
width: 100px;
text-align: center;
`;
alert(div.style.cssText);
</script>cssText프로퍼티를 사용하면 위와 같이 속성값과 같이 설정이 가능하다.
