1. 색깔 확인하기
- 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="style.css"> <!--style.css 적용하기-->
<title>Hello From HTML</title>
</head>
<body>
<div class="hello">
<h1>Hello!</h1>
</div>
<div class="hello">
<h1>Hello!</h1>
</div>
<div class="hello">
<h1>Hello!</h1>
</div>
<script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html> - app.js
const h1 = document.querySelector(".hello h1:first-child"); // HTML의 요소 가져오기
function handleTilteClick(){ // 클릭시 이벤트
console.log(h1.style.color);
h1.style.color = "blue";
console.log(h1.style.color);
}
h1.addEventListener("click", handleTilteClick);
2. 가정법 사용하기
- app.js
const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기
function handleTitleClick() { // 클릭 시 이벤트
if (h1.style.color === "blue") {
h1.style.color = "tomato";
} else {
h1.style.color = "blue";
}
}
h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출
3. 현재 상태 저장하기
- app.js
const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기
function handleTitleClick() { // 클릭 시 이벤트
const currentColor = h1.style.color;
let newColor;
if (currentColor === "blue") {
newColor = "tomato";
} else {
newColor = "blue";
}
h1.style.color = newColor;
}
h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출
4. CSS 파일에서 적용하기
- className 사용하기
- app.js
const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기
function handleTitleClick() {
h1.className = "active";
}
h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출body {
background-color: beige;
}
h1 {
color: cornflowerblue;
}
.active{
color: tomato;
}
- 가정법 사용하기
- app.js
const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기
function handleTitleClick() {
if(h1.className === "active"){
h1.className = "";
} else {
h1.className = "active";
}
}
h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출
transition사용하기- 요소의 속성 값이 변화할 때 애니메이션 효과를 부드럽게 적용하는 데 사용
- 속성 값이 변화할 때 즉시가 아니라, 일정 시간 동안 부드럽게 변경되게 함
body {
background-color: beige;
}
h1 {
color: cornflowerblue;
transition: color .5s ease-in-out;
}
.active{
color: tomato;
}
- 오류의 위험 줄이기
- 정확한 변수명 사용하기
- 변수를 선언해서 사용하기
const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기
function handleTitleClick() {
const clickedClass = "clicked";
if(h1.className === clickedClass){
h1.className = "";
} else {
h1.className = clickedClass;
}
}
h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출
- classList 사용하기
- class들의 목록으로 작업할 수 있게 허용해 줌
- className은 이전 class에 상관없이 다 교체해버림
- contains : 확인하기
- 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="style.css"> <!--style.css 적용하기-->
<title>Hello From HTML</title>
</head>
<body>
<div class="hello">
<h1 class="hi">Hello!</h1>
</div>
<div class="hello">
<h1>Hello!</h1>
</div>
<div class="hello">
<h1>Hello!</h1>
</div>
<script src="app.js"></script> <!--app.js 적용하기-->
</body>
</html> const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기
function handleTitleClick() {
const clickedClass = "clicked";
if(h1.classList.contains(clickedClass)){ // clicked가 포함되어있는지 확인
h1.className = "";
} else {
h1.className = clickedClass;
}
}
h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출
const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기
function handleTitleClick() {
const clickedClass = "clicked";
if (h1.classList.contains(clickedClass)) { // clickedClass가 포함되어 있는지 확인
h1.classList.remove(clickedClass); // clickedClass 제거
} else {
h1.classList.add(clickedClass); // clickedClass 추가
}
}
h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출
- toggle 이용하기
- classList 내에 clicked classrk 있다면 clicked를 제거해주고 없으면 clicked를 추가해줌
- app.js
const h1 = document.querySelector("div.hello:first-child h1"); // HTML의 요소 가져오기
function handleTitleClick() {
h1.classList.toggle("clicked");
}
h1.addEventListener("click", handleTitleClick); // 클릭 시 handleTitleClick 함수 호출
Share article
