728x90
반응형
[JavaScript] 15. 쿼리 셀렉트문과 클래스 선택자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
display:flex;
justify-content:center;
}
.like-heart{
font-size:40px;
color:gray;
cursor: pointer;
}
.like-heart.liked{
font-size:60px;
color:red;
cursor: pointer;
}
</style>
<body>
<span class="like-heart" onclick="likeToggle()"> ♡</span>
<span class="like-heart" onclick="likeToggle()"> ♡</span>
<span class="like-heart" onclick="likeToggle()"> ♡</span>
<script>
function likeToggle(){
let likeHeart=document.querySelector(".like-heart");
console.log("likeHeart",likeHeart);
console.log(typeof likeHeart);
console.log(likeHeart);
likeHeart.style.fontSize="40px";
// 토글 기능 ---> 상태값 저장을 위한 변수라는 개념 필요!
// 부정 ---> 삼항연산자
likeHeart.classList.toggle("liked");
}
// 확인
// let elements=document.getElementById("example");
// console.log(elements);
// console.log(typeof elements);
// Node, NodeList, HTMLCollection
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
display:flex;
justify-content:center;
}
.like-heart{
font-size:40px;
color:gray;
cursor: pointer;
}
.like-heart.liked{
font-size:60px;
color:red;
cursor: pointer;
}
</style>
<body>
<span class="like-heart" onclick="likeToggle(this)"> ♡</span>
<span class="like-heart" onclick="likeToggle(this)"> ♡</span>
<span class="like-heart" onclick="likeToggle(this)"> ♡</span>
<script>
function likeToggle(el){
el.classList.toggle("liked");
}
// 확인
// let elements=document.getElementById("example");
// console.log(elements);
// console.log(typeof elements);
// Node, NodeList, HTMLCollection
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
display:flex;
justify-content:center;
}
.like-heart{
font-size:40px;
color:gray;
cursor: pointer;
transition: color 1s ease,transform 1s ease;
}
.like-heart.liked{
color:red;
cursor: pointer;
/* css로 애니메이션 효과 만들기 */
transform: scale(1.5);
}
</style>
<body>
<span class="like-heart" onclick="likeToggle(this)"> ♡</span>
<span class="like-heart" onclick="likeToggle(this)"> ♡</span>
<span class="like-heart" onclick="likeToggle(this)"> ♡</span>
<script>
function likeToggle(el){
el.classList.toggle("liked");
}
// 확인
// let elements=document.getElementById("example");
// console.log(elements);
// console.log(typeof elements);
// Node, NodeList, HTMLCollection
</script>
</body>
</html>728x90
반응형
'HTML,CSS, JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 17. Promise 타입 (0) | 2024.08.02 |
|---|---|
| [JavaScript] 16. 이벤트 처리 - 배너 변경하기 (0) | 2024.08.01 |
| [JavaScript] 14. 이벤트 처리 - 이미지 토글 (0) | 2024.08.01 |
| [JavaScript] 13. 이벤트 위임 - 연습문제 풀이 (0) | 2024.07.26 |
| [JavaScript] 12. 이벤트 위임과 버블링 (0) | 2024.07.26 |