어제는 JS에서 HTML의 요소들을 가져오고 수정하는 기본적인 방법을 공부했다.
오늘은 JS에서 직접 스타일을 주지 않고, css에 정의된 클래스들을 사용해서 HTML의 element들을 만져봤다.
1. HTML에서 사용할 css파일을 명시해준다.
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='index.css'/>
<title>Document</title>
</head>
<body>
<div class='title'>
<h1>TEST</h1>
</div>
<script src='index.js'></script>
</body>
</html>
2. css에 사용할 클래스들을 정의해준다.
[index.css]
.title {
color: blue;
}
.title.clicked {
color: tomato;
font-size: 20px;
}
3. JS에서 변경하고자 하는 요소의 클래스 이름을 바꿔준다.
[index.js]
const title = document.querySelector('.title');
function handleTitleClick(){
const clickedClass = 'clicked';
title.classList.toggle(clickedClass)
}
title.addEventListener('click', handleTitleClick)
'JS' 카테고리의 다른 글
| JS에서 HTML 기본동작 막기 - preventDefault() (1) | 2024.01.01 |
|---|---|
| JS에서 HTML 가져오기 (1) | 2023.12.30 |
| JS 배열 관련 함수1 (0) | 2023.12.13 |
| [인프런x코드캠프] 훈훈한 Javascript_15日, 16日 (완강) (5) | 2023.02.08 |
| [인프런x코드캠프] 훈훈한 Javascript_14日 (2) | 2023.02.06 |
