JAVA_Script

자바스크립트(간단한 다크모드만들기)

강준석 2022. 12. 27. 13:23
728x90

다크모드 만들기

 

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <input id="mode" type="button" value="다크모드">
    <p>내용을 입력</p>
 <!-- jQuery -->
 <script src="https://code.jquery.com/jquery-3.6.2.min.js" integrity="sha256-2krYZKh//PcchRtd+H+VyyQoZ/e3EcrkxhM8ycwASPA=" crossorigin="anonymous"></script>
 <!-- JS -->
 <script src="script.js"></script>
</body>
</html>

js

// let cnt = 0; //클릭횟수를 저장하는 변수

// document.querySelector('#mode').addEventListener('click', function(){
//     cnt++;

//     //버튼 글씨 라이트 모드와 다크 모드 on/off  
//     if(cnt % 2 == 1) {
//         // document.querySelector('#mode').setAttribute('value', '라이트모드');
//         document.querySelector('#mode').value='라이트모드';
//         //버튼 글씨 다크모드일때 배경색 검정 글꼴 흰색
//         document.body.style.backgroundColor='black';
//         document.body.style.color='white';
//     } else {
//         document.querySelector('#mode').value='다크모드';
//         //버튼 글씨 라이트모드일때 배경 흰색 글꼴 검정
//         document.body.style.backgroundColor='white';
//         document.body.style.color='black';
//     }

// });
// =================jQuery로 만들기=====================
let cnt = 0;
$('#mode').on('click',function(){
    cnt++;
    if(cnt%2===0){
        $('#mode').attr('value','라이트모드');
        // $('#mode').value('라이트모드'); 위에 코드와 같은의미
        $('body').css('backgroundColor','black');
        $('body').css('color','white');

    }else{
        $('#mode').attr('value','다크모드');
        // $('#mode').value('라이트모드'); 위에 코드와 같은의미
        $('body').css('backgroundColor','white');
        $('body').css('color','black');
    }
});
728x90
저작자표시 (새창열림)