천천히 알아보는 코딩공부

CSS in JavaScript 본문

JavaScript/기초

CSS in JavaScript

고기고기물고기 2022. 3. 20. 05:58

목표 - CSS 해당 클래스에 디자인 설정을 해두고 클래스를 변경 혹은 추가해서 디자인 설정하기

app.js

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

function handleClickEvent () {
    const activeClass = "active";
    if (title.className === activeClass)
    {
        title.className = "";
    } 
    else 
    {
        title.className = activeClass;
    }
}

h1.addEventListener("click", handleTitleClick);

css

h1{
color: cornflowerblue
}

body{
background-color : beige;
}

.active {
color: tomato;
}

index.html

<body>
	<div class="hello">
    	<h1> click me!</h1>
    </div>
    <scrpit src = "app.js"> </script>
</body>

문제점 : CSS는 잘 적용이 되자만 클래스명이 바뀜 원래 클래스 값을 잃어버림

 

해결방법

 

App.js

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

function handleClickEvent () {
    const activeClass = "active";
    if (h1.classList.contains(activeClass)
    {
        h1.classList.remove(clickedClass);
    } 
    else 
    {
        h1.classList.add(activeClass);
    }
}

h1.addEventListener("click", handleTitleClick);

원래의 클래스를 갖고, 클릭시 클래스 추가 및 제거됨

 

간단하게 한줄로만 표현 가능

 

function handleClickEvent () 
{
	h1.classList.toggle("active");
}
h1.addEventListener("click", handleTitleClick);

'JavaScript > 기초' 카테고리의 다른 글

javascript 기본 타입, 참조 타입(객체 타입)  (0) 2022.04.19
javascript 태그 추가  (0) 2022.03.31
JavaScript 기초 정리 2  (0) 2022.03.29
HTML in Javascript  (0) 2022.03.21
JavaScript 기초 정리  (0) 2022.03.16
'JavaScript/기초' Related Articles more
Comments