className
class 와 같은 예약어는 자바스크립트에서 객체의 프로퍼티가 될 수 없다는 제약사항이 있었다. 그렇기에 elem.class와 같이 사용하는 것 역시 불가능. 이러한 class속성에 대응하기 위해 등장한 것이 className!
<body class="main page">
<script>
alert(document.body.className); // main page
</script>
</body>클래스 문자열 전체, 속성값 전체를 바꾸는 것이 아닌 클래스 하나만 추가하거나 제거하고 싶은 경우 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에 구현된 Method
elem.classList.add/remove("class") – class를 추가하거나 제거
elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가
elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환
Style
style 속성과 대응하는 개별 프로퍼티를 조작하는 하기 위해선 여러 단어를 이어서 만든 프로퍼티를 다음과 같이 카멜 표기법을 사용해 이름을 지어야함
background-color => elem.style.backgroundColor
z-index => elem.style.zIndex
border-left-width => elem.style.borderLeftWidthdocument.body.style.backgroundColor = prompt('배경을 무슨 색으로 바꿀까요?', 'black');
style 프로퍼티 재지정
style 프로퍼티에 값을 할당했다가 시간이 지나 이를 제거해야 할 때,
요소를 숨기기 위해 elem.style.display = "none"를 적용했다고 가정한다면,
시간이 지나 처음부터 style.display를 설정하지 않았던 것처럼 되돌리고 싶어졌다면, 이럴 땐 delete elem.style.display를 사용해 프로퍼티를 삭제하는 대신 elem.style.display = ""같이 빈 문자열을 할당해주어야 한다.
이렇게 style.display에 빈 문자열을 할당하면 브라우저는 마치 처음부터 style.display 프로퍼티가 없었던 것처럼 CSS 클래스와 브라우저 내장 스타일을 페이지에 적용한다.
