본문 바로가기
Front

[Javascript] 간단하게 구현한 라이트 모드(light)와 다크(dark) 모드

by bkuk 2022. 9. 23.

초기 화면

모드 변환(day.night) button 클릭 시

 

 

모드 변환(day.night) button 클릭 시


 

 

전체 소스 코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script>

            window.onload = function() {
            	//html button의 아이디를 통한 접근
                 document.getElementById( "btn1").onclick = function() {
                    let h1 = document.getElementById( "h1" );
                    let BtnValue = document.getElementById( "btn1" );
                    
            		//body 태그의 배경색이 "white" 라면 실행되는 if문 
                    if(h1.style.background == "white") {
                        h1.style.background = "black";
                        h1.style.color = "white"

                        BtnValue.style.background = "yellow"
                        return;  
                    }
					//body 태그의 배경색이 "black" 라면 실행되는 if문 
                    if(h1.style.background == "black") {
                        h1.style.background = "white";
                        h1.style.color = "black";

                        BtnValue.style.background = "white"
                        return;
                    }
                }

            }
        </script>
    </head>
    <body id ="h1" style="background:white;">
        <input type = "button" id = "btn1" value = "모드 변환(day/night)"><br>
        <br /><hr /><br />
    </body>

댓글