Language/JavaScript

제어할 태그 선택하기(웹에서 주/야간 모드 만들기)

느낌표 공장장 2021. 5. 5. 17:08
document.querySelector(selectors);

 

: CSS 선택자로 요소를 선택하게 해준다. 주의할 점은 선택자에 해당하는 첫번째 요소만 선택한다는 것이다.

 

 

developer.mozilla.org/ko/docs/Web/API/Document/querySelector

 

 

Document.querySelector() - Web API | MDN

Document.querySelector() Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. 참고: 탐색은 깊이우선depth

developer.mozilla.org


document.getElementById(id).style.property = new style

: 특정 태그에 style 속성 넣기


 

< 주/야간 모드 만들기>

  <body>
    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black'
    document.querySelector('body').style.color = 'white'
  "/>
    <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white'
    document.querySelector('body').style.color = 'black'
  "/>
  </body>

주간 / 야간 모드

 

 

'Language > JavaScript' 카테고리의 다른 글

HTML과 자바스크립트의 차이  (0) 2021.05.05
script 태그, 이벤트, 콘솔  (0) 2021.04.30