className과 classList
✔️ className : 클래스 속성의 값을 가져오거나 설정할 수 있다.
✔️ elem.classList.add/remove("class") : class 추가/제거
✔️ elem.classList.toggle("class") : class가 존재할 경우 class를 제거하고, 없으면 추가
✔️ elem.classList.contains("class") : class 존재 여부에 따라 true/false를 반환
📌 classList는 이터러블 객체이기 때문에 반복문으로 나열할 수 있다.
<body class="one two three">
<script>
for(let name of document.body.classList){
console.log(name); //one two three
}
</script>
</body>
요소의 스타일
✔️ elem.style 뒤에 오는 프로퍼티는 카멜 표기법으로 표기한다.
background-color => elem.style.backgroundColor
z-index => elem.style.zIndex
border-left-width => elem.style.borderLeftWidth
style 프로퍼티 재지정하기
✔️ style 프로퍼티에 값을 할당했다가 시간이 지나 이를 제거해야할 때 "" 빈 문자열로 처리해준다.
document.body.style.display = "none";
setTimeout(() => document.body.style.display = "", 1000);
// 1초 후 다시 원래 상태로 돌아온다.
getComputedStyle로 스타일 읽기
✔️ 스타일 정보가 들어있는 객체를 반환해줌.
<head>
<style> body { color: red; margin: 5px } </style>
</head>
<body>
<script>
let computedStyle = getComputedStyle(document.body);
// 이제 마진과 색 정보를 얻을 수 있습니다.
alert( computedStyle.marginTop ); // 5px
alert( computedStyle.color ); // rgb(255, 0, 0)
</script>
</body>
Reference
반응형
'Frontend > JavaScript' 카테고리의 다른 글
| [Javascript] 브라우저 창 사이즈와 스크롤 (0) | 2022.01.13 |
|---|---|
| [Javascript] 요소 사이즈와 스크롤 (0) | 2022.01.13 |
| [Javascript] 요소 생성,삽입,삭제 메서드 (0) | 2022.01.13 |
| [Javascript] 속성과 프로퍼티 (0) | 2022.01.11 |
| [Javascript] 주요 노드 프로퍼티 (0) | 2022.01.11 |