Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

기록

자바스크립트 토글 본문

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;
}
저작자표시 (새창열림)

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

자바스크립트 랜덤명언+랜덤이미지넣기  (0) 2023.09.22
자바스크립트 시계기능만들기 setInterval, setTimeout, padStart  (0) 2023.09.21
자바스크립트 addEventListener로 글자색변경  (0) 2023.09.20
자바스크립트 JSP에서 파일 이미지 미리보기 구현  (2) 2023.02.18
제이쿼리 nav바 토글버튼 만들기(EMP/detail)  (0) 2023.02.08
'JAVASCRIPT&JQUERY' Related Articles more
Comments