요소에 스타일을 적용할 수 있는 방법은 두 가지가 있다.
- CSS에 클래스를 만들고, 요소에 <div class="...">처럼 클래스 추가하기
- <div style="...">처럼 프로퍼티를 style에 바로 써주기
자바스크립트를 사용하면 클래스와 style 프로퍼티 둘 다를 수정할 수 있다. 두 방법 중 하나를 택하라면 style보다 css 클래스를 수정해야 한다. style은 클래스를 다룰 수 없을 때만 사용해야 한다.
style은 아래와 같이 자바스크립트를 사용해 요소의 좌표를 동적으로 계산하고, 계산한 좌표를 설정해주고자 할 때 사용하면 좋다.
let top = /* 복잡한 계산식 */;
let left = /* 복잡한 계산식 */;
elem.style.left = left; // 예시: '123px', 런타임으로 좌표를 계산할 수 있습니다.
elem.style.top = top; // 예시: '456px'
1. classList
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><<classList>>에 구현된 메서드
- elem.classList.add/remove("class") – class를 추가하거나 제거
- elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가
- elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환
**classList는 이터러블 객체이기 때문에 for...of를 사용해 클래스를 나열할 수 있다는 특징이 있다.
<body class="main page">
<script>
for (let name of document.body.classList) {
alert(name); // main과 page가 출력됨
}
</script>
</body>
2. 요소와 스타일
프로퍼티 elem.style은 속성 "style"에 쓰인 값에 대응되는 객체이다.
elem.style.width="100px"은 style 속성값을 문자열 width:100px로 설정한 것과 같다.
여러 단어를 이어서 만든 프로퍼티는 다음와 같이 카멜 표기법을 사용해 이름 짓는다.
1. background-color => elem.style.backgroundColor
2. z-index => elem.style.zIndex
3. border-left-width => elem.style.borderLeftWidth
3. style 프로퍼티 재지정하기
style 프로퍼티에 값을 할당했다가 시간이 지나 이를 제거해야 할 때가 종종 있다.
시간이 지나 처음부터 style.display를 설정하지 않았던 것처럼 되돌리고 싶어졌다.
//이럴 땐 delete elem.style.display를 사용해 프로퍼티를 삭제하는 대신
//elem.style.display = ""같이 빈 문자열을 할당해주어야 한다.
document.body.style.display = "none"; // hide
setTimeout(() => document.body.style.display = "", 1000); // 1초 후 다시 원래 상태로 돌아온다이렇게 style.display에 빈 문자열을 할당하면 브라우저는 마치 처음부터 style.display 프로퍼티가 없었던 것처럼 CSS 클래스와 브라우저 내장 스타일을 페이지에 적용한다.
3. 단위에 주의하기
자바스크립트를 사용해 스타일 값을 설정할 때는 단위를 붙여주는 걸 잊지 말아야 한다.
<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
</script>
</body>4. getComputedStyle로 계산된 스타일 얻기
스타일 수정 말고 스타일을 읽을 수 있는 방법이 있다.
style 프로퍼티 값을 읽으면 되지 않을까 생각할 수 있겠지만, style 프로퍼티는 "style" 속성의 값을 읽을 때만 사용할 수 있다. style 프로퍼티만으론 CSS 종속(CSS cascade)값을 다루지 못한다.
getComputedStyle(element, [pseudo])
//기본 문법
//element : 값을 읽으 요소
//pseudo : ::before같이 의사 요소(pseudo-element)가 필요한 경우 명시해줌. 빈 문자열을 넘겨주거나 아무런 값을 입력하지 않은 경우 요소 자체를 의미함getComputedStyle을 호출하면 elem.style같이 스타일 정보가 들어 있는 객체가 반환되는데, 여기엔 elem.style과는 달리 전체 CSS 클래스 정보도 함께 담기게 된다.
<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>'Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] defer, async 스크립트 (0) | 2022.06.20 |
|---|---|
| [JavaScript] 브라우저 창 사이즈와 스크롤 (0) | 2022.06.20 |
| [JavaScript] 속성과 프로퍼티 (0) | 2022.06.19 |
| [JavaScript] 주요 노드 프로퍼티 (0) | 2022.06.19 |
| [JavaScript] getElement, querySelector (0) | 2022.06.19 |
