토글 버튼으로 나이트모드 구현하기

손윤주·2022년 4월 22일
0
post-thumbnail

토글 (toggle)


토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태밖에는 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값으로 변하는 것을 의미한다.

토글 중 하나인 나이트모드 버튼 기능을 구현했다.

(좌-day모드 / 우-night모드)

<script>
///<a> 태그가 포함된 부분에 컬러를 지정하겠다!
 var Links = {
            setColor: function (color) {
                var alist = document.querySelectorAll('a');
                var i = 0;
                while (i < alist.length) {
                    alist[i].style.color = color;
                    i = i + 1;
                }
            }
        }

       ///글자색과 배경색에 컬러를 지정하겠다!
        var Body = {
            setColor: function (color) {
                document.querySelector('body').style.color = color;
            },
            setBackgroundColor: function (color) {
                document.querySelector('body').style.backgroundColor = color;
            }
        }
        ///if문을 사용해서 night 모드에는 전체적으로 night모드 컬러 / day 버튼으로 바뀌고,
		///day 모드에는 day모드 컬러 / night 버튼으로 바뀌게 하자.
        function nightDayHandler(self) {
            var target = document.querySelector('body');
            if (self.value === 'night') {
                Body.setBackgroundColor('black');
                Body.setColor('white');
                self.value = 'day';

                Links.setColor('powderblue')
            } else {
                Body.setBackgroundColor('white');
                Body.setColor('black');
                self.value = 'night';

                Links.setColor('blue')
            }
        }
</script>

<body>
<h1><a src="javascript01.html">WEB</a></h1>

<input type="button" value="night" onclick="
nightDayHandler(this);
">

<div class="list">
    <ol>
        <li><a href="html.html">HTML</a></li>
        <li><a href="css.html">CSS</a></li>
        <li><a href="javascript.html">JavsScript</a></li>
    </ol>

</div>
 

JQuery로 간결하게 정리하자면,

<head>
JQuery google cdn 링크를 삽입하고, 주석처리된 부분을 생략할 수 있다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<script>
var Links = {
    setColor: function (color) {
        //var alist = document.querySelectorAll('a');
        //var i = 0;
        //while (i < alist.length) {
        //alist[i].style.color = color;
        //i = i + 1;
        //}
        //}
        $('a').css('color', color);
    }
}

var Body = {
    setColor: function (color) {
        // document.querySelector('body').style.color = color;
        $('body').css('color', color);
    },
    setBackgroundColor: function (color) {
        // document.querySelector('body').style.backgroundColor = color;
        $('body').css('backgroundColor', color);
    }
}

function nightDayHandler(self) {
    var target = document.querySelector('body');
    if (self.value === 'night') {
        Body.setBackgroundColor('black');
        Body.setColor('white');
        self.value = 'day';

        Links.setColor('powderblue')
    } else {
        Body.setBackgroundColor('white');
        Body.setColor('black');
        self.value = 'night';

        Links.setColor('blue')
    }
}
</script>

ref. 생활코딩

0개의 댓글