자바스크립트 토글

JAVASCRIPT&JQUERY

자바스크립트 토글

9400 2023. 9. 20. 17:15

<body>
    <div class="hello">
    <h1 class="sexy-font">바뀌는값</h1>
    </div>
    <script src="app.js"></script>
</body>

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

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

h1.addEventListener("click",handleTitleClick);

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

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

h1.addEventListener("click",handleTitleClick);

body {
    background-color: beige;
}

h1{
    color : blue;
    transition: color 0.5s ease-in-out;
}

.active{
    color : tomato;
}

.sexy-font{
    font-family: 'Courier New', Courier, monospace;
}

저작자표시 (새창열림)