카테고리 없음

CSS 선택자 접근 (document.querySelector)

Canyi 2022. 10. 11. 15:29

input 버튼에 

<!DOCTYPE html>
<html lang="ko">
    <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>CSS선택자</title>
    </head>
    <body>
        <h1>배경색이 변경됩니다.</h1>
        <input type="button" value="red" id="bgcolor" 
               onclick="
                if(document.querySelector('#bgcolor').value == 'red')
                {
                    document.querySelector('body').style.backgroundColor  = 'blue';
                    document.querySelector('body').style.color  = 'white';
                    document.querySelector('#bgcolor').value = 'blue';
                }
                else
                {
                    document.querySelector('body').style.backgroundColor  = 'red';
                    document.querySelector('body').style.color  = 'white';
                    document.querySelector('#bgcolor').value = 'red';
                }
        ">
    </body>
</html>

red 버튼을 클릭할 경우

blue 버튼을 다시 클릭할 경우