스타일과 클래스
className과 classList
클래스 변경은 스크립트를 통해 자주 하게 되는 동작 중 하나이다.
오래전 자바스크립트엔 "class"같은 예약어는 객체의 프로퍼티가 될 수 없다는 제약사항이 있었다. 지금은 이런 제약사항이 사라졌지만, 과거엔 "class" 프로퍼티를 사용할 수 없었기 때문에 elem.class를 사용하는 것 역기 불가능했다.
이런 배경 때문에 클래스를 위한 프로퍼티 "className"가 도입되게 되었다.
<body class="main page">
<script>
alert(document.body.className); // main page
</script>
</body>elem.className에 무언가를 대입하면 클래스 문자열 전체가 바뀐다. 그런데 이렇게 속성값 전체를 바꾸는 게 아니고 클래스 하나만 추가하거나 제거하고 싶은 경우도 있기 마련이다.
이럴 때 elem.classList라는 프로퍼티를 사용할 수 있다.
elem.classList엔 클래스 하나만 조작하게 해주는 메서드인 add/remove/toggle이 구현되어 있다.
<body class="main page">
<script>
// 클래스 추가
document.body.classList.add('article');
alert(document.body.className); // main page article
</script>
</body>이렇게 클래스 속성값 전체를 바꾸고 싶을 때는 className으로, 개별 클래스를 조작하고 싶을 때는 classList를 사용하면 된다.
classList에 구현된 메서드
- elem.classList.add/remove("class") // class를 추가하거나 제거
- elem.classList.toggle("class") // class가 존재할 경우 class를 제거하고, ,그렇지 않은 경우엔 추가
- elem.classList.contains("class") // class 존재 여부에 따라 true/false를 반환
요소의 스타일
프로퍼티 elem.style은 속성 "style"에 쓰인 값에 대응되는 객체이다. elem.style.width="100px"은 style 속성값 문자열 width:100px로 설정한 것과 같다.
여러 단어를 이어서 만든 프로퍼티는 다음과 같이 카멜 표기법을 사용해 이름 짓는다.
- background-color => elem.style.backgroundColor
- z-index => elem.style.zIndex
- border-left-width => elem.style.borderLeftWidth
단위에 주의하기
자바스크립트를 사용해 스타일 값을 설정할 때는 단위를 붙여주는 걸 잊지 말아야 한다.
elem.style.top에 값을 설정할 때 10px이 아닌 10을 설정하면 제대로 동작하지 않는다.
<body>
<script>
// 동작하지 않는다.
document.body.style.margin = 20;
alert(document.body.style.margin); // '' (값이 제대로 할당되지 않았기 때문에 빈 문자열이 출력된다.)
// CSS 단위(px)를 추가해봅시다. 제대로 동작한다.
document.body.style.margin = '20px';
alert(document.body.style.margin); // 20px
alert(document.body.style.marginTop); // 20px
alert(document.body.style.marginLeft); // 20px
</script>
</body>