JavaScript/Function implementation

day / night mode 구현하기

zenghyun 2022. 12. 15. 16:43

 

day/ night mode를 만들어보자

 

 

 

 

 

[ 조건 ] 

1. day / night mode를 만들 수 있는 버튼은 1개만 사용하자

2. 버튼을 누르면 body의 backgroundColor과 fontColor를 해당 모드에 맞게 바꾸자 

3. 해당 모드에 맞는 버튼의 value를 변경하자 

 

 

 

 

code

<!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>
    <style>
        input { width:100px; height: 80px; font-size: 24px;}
    </style>
</head>
<body>
    <h1>day mode / night mode</h1>
    <input type="button" value="night" id="visual" onclick="change()">

    <script>
        let visual = document.getElementById('visual'); 
        
        function change() {
            if (  visual.value === 'night'   ){
                document.querySelector('body').style.backgroundColor = 'black';
                document.querySelector('body').style.color = 'white';
                visual.setAttribute('value','day');
            }
            else {
                document.querySelector('body').style.backgroundColor = 'white';
                document.querySelector('body').style.color = 'black';
                visual.setAttribute('value','night');
            }
        }
    </script>
</body>
</html>

 

핵심

[ element.setAttribute() ]

Syntax : element.setAttribute(name, value)

 

Parameters

Parameter 설명
name 필수요건 
속성의 이름
value 필수요건
새로운 속성의 값

 

 

※ 주의사항

 

요소에 값이 있는 style 속성을 추가할 수 있지만 style 속성의 다른 속성을 덮어쓸 수 있으므로 권장하지 않습니다.
 
권장 사용 방법 
 
// 이렇게 사용하지 말자
element.setAttribute("style", "background-color:red;");
 
 
// 이렇게 사용하자
element.style.backgroundColor = "red";
 
 
 

ref: https://www.w3schools.com/jsref/met_element_setattribute.asp 

 

HTML DOM Element setAttribute() Method

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com