메모장

12. 제어할 태그 선택하기 본문

JavaScript/[생활 코딩 JS]

12. 제어할 태그 선택하기

Itchild 2024. 4. 24. 22:13
728x90
반응형

 

예를 들어 웹페이지의 버튼을 누르면 night 모드가 되고 , 버튼을 누르면 day 모드가 되는 것을 만들어보려고 한다. 

<input type="button" value="night">
<input type="button" value="day">

그리고 이 버튼을 클릭했을때의 이벤트가 필요합니다. 그래서 onclick 속성을 추가하고, 
onclick안에 내용을 넣어볼 예정 이다. 
<input type="button" value="night" onclick="">
<input type="button" value="day" onclick="">
 

이 버튼을 클릭했을때 <body>태그에 style 속성을 동적으로 , 프로그래밍적으로 , 상호작용에 의해 넣으려고 할때 자바 스크립트 문법에 따라 웹 브라우저에게 <body> 태그를 선택하게 해야 한다.

 

document.querySelector(selectors); <---- 이것을 쓰면 된다.

 

버튼에 한번 적용 해보겠습니다. 

<input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    도큐먼트의 쿼리 선택자 ('body' 라는이름) . 스타일 중 . 배경색을 = 검은색으로 바꿔줘

    document.querySelector('body').style.Color = 'white'; 
    도큐먼트의 쿼리 선택자 ('body' 라는이름) . 스타일 중 . 글씨색을 = 하얀색으로 바꿔줘
">

<input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    도큐먼트의 쿼리 선택자 ('body' 라는이름) . 스타일 중 . 배경색을 = 하얀색으로 바꿔줘

    document.querySelector('body').style.Color = 'black'; 
    도큐먼트의 쿼리 선택자 ('body' 라는이름) . 스타일 중 . 글씨색을 = 검은색으로 바꿔줘
">
 

사용자와 상호작용 해서 HTML, CSS 를 프로그래밍 적으로 , 동적으로 변경해서 애플리케이션을 만드는 핵심적인 원리와 그 중요한 사례 였습니다.

 

728x90
반응형

'JavaScript > [생활 코딩 JS]' 카테고리의 다른 글

14. 조건문 예고  (0) 2024.04.25
13. 프로그램, 프로그래밍 , 프로그래머  (0) 2024.04.24
11. css 기초: 선택자  (0) 2024.04.24
10. css 기초: <style> 태그  (0) 2024.04.24
09. css 기초: style 속성  (0) 2024.04.24
'JavaScript/[생활 코딩 JS]' Related Articles more