클릭을 했을 때 클래스명에 따라 색상이 변경되도록 만들겠다.
기본값 클래스에서 클릭 이벤트가 발생시 클래스명이 바뀌면서 색상도 바뀌는..
그리고 cursor: pointer도 클래스를 설정해서 효과를 줄것인데,
문제는 classList에 저장될때 clicked 상태가 돼야 색상이 변경되는데,
아래처럼 btn clicked 가 되어 색상 변경이 안된다. (한 개의 클래스만 체크가능)
그래서 필요한게 contains라는 객체이다.
contain은 value가 존재 하는지 체크한다.
<HTML>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<h1 id="title" class="btn">안녕하세요!</h1>
<script src="./index.js"></script>
</body>
</html><CSS>
body{
background-color: #ecf0f1;
margin: 0px;
}
h1{
text-align: center;
color: tomato;
transition: color .5s ease-in-out;
}
.btn{
cursor: pointer;
}
.clicked {
color : #7f8c8d;
}
<JS 코드>
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
const hasClass = title.classList.contains(CLICKED_CLASS);
if (!hasClass) {
title.classList.add(CLICKED_CLASS);
} else {
title.classList.remove(CLICKED_CLASS);
}
}
title.addEventListener("click", handleClick);
function init() {
handleClick();
}
init();
<실행화면>
clicked class가 있냐없냐로 classList에 add , remove하는게 아니라
clicked가 추가되었는지 확인하고 true or false로 조건문을 돌리기 때문에
다른 클래스(btn)가 추가 되어도 문제가 없다.
※ 코드를 더 간단하게 만들기 위해서 toggle 함수를 사용해보겠다.
클래스가 있는지 확인해서 추가, 제거를 해준다.
const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick() {
title.classList.toggle(CLICKED_CLASS);
}
title.addEventListener("click", handleClick);
function init() {
handleClick();
}
init();
※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.
'Javascript > Clone Website' 카테고리의 다른 글
| [Vanilla-JS] 5. Making a To Do List part One (0) | 2020.08.06 |
|---|---|
| [Vanilla-JS] 4. Saving the User Name (0) | 2020.08.06 |
| [Vanilla-JS] 3. Making a JS Clock part (0) | 2020.08.02 |
| 1. ES5 , Vanilla JS(JavaScript)란? (0) | 2020.07.01 |
댓글