1. 인라인 스타일 조작
<body>
<div id="word">Hello! World!</div>
<script>
let word = document.getElementById('word');
word.style.color = 'blue';
word.style.backgroundColor='yellow';
word.style.fontSize = '48px';
</script>
</body>
2. class로 조작(className, classList)
실제로 퍼블리싱을 하는 과정에서 클래스를 조작하는 일이 많다. 미리 CSS문서에서 'on클래스가 붙는 경우'와 '그렇지 않은 경우'로 나누어서 스타일을 지정해둔 뒤, 제이쿼리나 자바스크립트 문법을 통해 class를 조작하여 스타일을 변경 시키는 경우가 많다.
1) className
요소 노드의 className 프로퍼티를 참조하면 class attribute 값을 문자열로 반환한다. 요소 노드의 className 프로퍼티에 문자열을 할당하면 class attribute 값을 할당한 문자열로 변경한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class로 html 요소 조작</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.red{color:red;}
.blue{color:blue;}
</style>
</head>
<body>
<div class="box red">Hello! World!</div>
<script>
const box = document.querySelector('.box');
//box 요소의 class attribute 값 취득
console.log(box.className); //box red
//box 요소의 class 중 red만 blue로 변경
box.className = box.className.replace('red', 'blue');
</script>
</body>
</html>
2) classList
classList 프로퍼티는 class attribute의 정보를 담은 DOMTokenList 객체를 반환한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>class로 html 요소 조작</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: antiquewhite;
}
.red{color:red;}
.blue{color:blue;}
</style>
</head>
<body>
<div class="box red">Hello! World!</div>
<script>
const box = document.querySelector('.box');
console.log(box.classList);
//DOMTokenList(2) [length:2, value: 'box red', 0 : 'box', 1: 'red']
box.classList.replace('red', 'blue');
//red class를 blue로 교체
</script>
</body>
</html>
DOMTokenList 객체는 다음과 같이 유용한 메서드들을 제공한다.
- add(className): 인수로 전달한 1개 이상의 문자열을 class attribute 값으로 추가.
box.classList.add('foo');
//class = 'box red foo'- remove(className): 인수로 전달한 1개 이상의 문자열과 일치하는 클래스를 삭제한다. 해당하는 클래스가 없을 경우 무시된다.
box.classList.remove('foo');
-item(index): 인수로 전달한 index에 해당하는 클래스를 class attribute에서 반환한다.
//class = "box red"
box.classList.item(0); //box
box.classList.item(1); //red- contains(className): 인수로 전달한 문자열과 일치하는 클래스가 class attribute에 포함되어 있는지 확인한다.
//class="box red";
$box.classList.contains('box'); //true
$box.classList.contains('blue'); //false-replace(oldClassName, newClassName): 첫번째 인수로 전달한 문자열을 두번째 인수로 전달한 문자열로 변경한다.
$box.classList.replace('red', 'blue');
//class명 red를 blue로 변경-toggle(className): 인수로 전달한 문자열과 일치하는 클래스가 있으면 제거하고, 없으면 추가한다.
$box.classList.toggle('foo');
$box.classList.toggle('foo', true); //강제로 class 추가
$box.classList.toggle('foo', false); //강제로 class 삭제'Javascript' 카테고리의 다른 글
| [javascript] 이벤트 객체와 target 속성 (0) | 2023.02.03 |
|---|---|
| [javascript] event handler 예제(onclick, onkeydown 등) (0) | 2023.02.03 |
| Javascript DOM 어트리뷰트 조작(getAttribute, setAttribute) (0) | 2023.02.02 |
| Javascript DOM 텍스트 요소 조작(textContent, innerHTML, innerText) (0) | 2023.02.02 |
| javascript Array(배열) method(1) push, pop, shift, unshift (0) | 2023.02.02 |