[2-4] CSS in JavaScript

choimarmot·2024년 1월 17일

노마드 코더

[노마드 코더] 바닐라 JS로 크롬 앱 만들기

목록 보기

10/28

바닐라 JS로 크롬 앱 만들기 [2-4] CSS in JavaScript

참고: HTMLHeadingElement - Web APIs | MDN

자바스크립트에는 애니메이션 기능을, CSS에는 스타일 기능

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">
    <title>valila js</title>
</head>
<body>
    <div class="hello">
    <h1>click me!</h1>
    </div>
    <script src="web.js"></script>
</body>
</html>

조건문(if문) 활용

const h1 = document.querySelector(".hello:first-child h1");

function handleTitleClick() {
if(h1.style.color === "blue") {
    h1.style.color = "tomato";
} else {
    h1.style.color = "blue";
}
}

h1.addEventListener("click", handleTitleClick);

클릭 시 글자색이 blue 이면 tomato 색으로 변경
tomato 색이면 blue로 변경

const h1 = document.querySelector(".hello:first-child h1");

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);

const, let 활용해서 더 깔끔하게 정리

CSS 활용

JavaScript

const h1 = document.querySelector(".hello:first-child h1");

function handleTitleClick() {
    h1.className = "active";
}

h1.addEventListener("click", handleTitleClick);

CSS

body {
    background-color: beige;
}

h1 {
    color: cornflowerblue;
}

.active {
    color: tomato;
}

색상, 디자인에 관한건 CSS에 넣음
1. CSS →.active 색상을 토마토로 설정
2. JS → h1 클릭 시 class가 active가 됨
3. 웹페이지에서 h1을 클릭하면 색상이 변경됨

className

const h1 = document.querySelector(".hello:first-child h1");

function handleTitleClick() {
    const clickedClass = "clicked"; // law value(clicked) 사용으로 인한 에러 발생 최소화 목적, 변수 사용 시 잘못 적으면 콘솔에서 알려줌 
    if(h1.className === clickedClass) {
        h1.className = "";
    } else {
        h1.className = clickedClass;
    }
}

h1.addEventListener("click", handleTitleClick);

조건문을 활용하면 누를 때 마다 색상이 바뀌게 할 수 있음

h1에 이미 class가 있는 상태로 시작한다면 자바스크립트가 기존 class를 없애버리는 문제 발생
해결방법 → classList 사용

classList

const h1 = document.querySelector(".hello:first-child h1");

function handleTitleClick() {
    const clickedClass = "clicked"; // law value(clicked) 사용으로 인한 에러 발생 최소화 목적, 변수 사용 시 잘못 적으면 콘솔에서 알려줌 
    if(h1.classList.contains(clickedClass)) {
        h1.classList.remove(clickedClass);
    } else {
        h1.classList.add(clickedClass);
    }
}

h1.addEventListener("click", handleTitleClick);

classList.contains : HTML 요소의 class에 포함되어 있는지 확인

만약(if) 클래스리스트에 “clicked”가 있다면 “clicked”를 제거(remove)하고 그렇지 않다면(else) “clicked”를 추가(add)
→ 위 방법을 사용하면 기존에 있는 className 유지 가능

classList.toggle

const h1 = document.querySelector(".hello:first-child h1");

function handleTitleClick() {
    h1.classList.toggle("clicked");
}

h1.addEventListener("click", handleTitleClick);