JavaScript
[JavaScript] JavaScript와 CSS
기록하는_사람
2022. 10. 14. 14:10
JavaScript와 CSS
📌 JavaScript와 CSS
: JavaScript에서 CSS 수정 가능.
📄 h1을 클릭하면 텍스트가 green, tomato로 번갈아 색이 바뀌도록 하는 프로그램.
📄 index.html
<!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">
<link rel="stylesheet" href="style.css"/>
<title>Momentum</title>
</head>
<body>
<h1>Hello! This is title</h1>
<script src="app.js"></script>
</body>
</html>📄 style.css
body {
background-color: beige;
}
h1 {
color: green;
}
.clicked {
color: tomato;
}📄 app.js
const title = document.querySelector("h1");
function handleTitleClick() {
const clickedClass = "clicked";
if(title.className === clickedClass) {
title.className = "";
}
else {
title.className = clickedClass;
}
}
title.addEventListener("click", handleTitleClick);💡 .className
: 클래스 이름을 통째로 바꾸기 때문에 기존에 존재하던 클래스도 삭제될 위험이 있음.
💡 .classList
- .classList.contains( [클래스이름] ) : 해당 클래스가 포함되어 있는지 확인.
- .classList.remove( [클래스 이름] ) : 해당 클래스 삭제.
- .classList.add( [클래스 이름] ) : 해당 클래스 추가.
📄 app.js
const title = document.querySelector("h1");
function handleTitleClick() {
const clickedClass = "clicked";
if(title.classList.contains(clickedClass)) {
title.classList.remove(clickedClass);
}
else {
title.classList.add(clickedClass);
}
}
title.addEventListener("click", handleTitleClick);💡 .toggle
: 클래스가 존재하는지 확인 후,
클래스가 없으면 추가하고, 있으면 삭제함.
📄 app.js
const title = document.querySelector("h1");
function handleTitleClick() {
title.classList.toggle("clicked");
}
title.addEventListener("click", handleTitleClick);