oz oz
10
2022-01-15 16:25:42
3
108

자바스크립트 왕초보 Document.querySelector 관련 질문 드리고싶습니다.


생활코딩님 유튜브를 보며 공부 하던중

수정하고싶은곳에서 막히는 부분이 있어 조언을 얻고 싶습니다.


우선 제 코드와 결과창이며,

<!-- !doctype, html, ,head, body (꼭 구분을 해줘야함) -->
<!doctype html>
<html>
<head>
<!-- title 태그(제목 * 책표지) -->
<title>WEB3 - JavaScript</title>
<!-- 문자 호환 (글자 깨짐방지) -->
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>

<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="Night" onclick="
  document.querySelector('body').style.backgroundColor='black';
  document.querySelector('body').style.color='white';
  document.querySelector('a').style.color='white';
">
<input type="button" value="day">
<div id="grid">

<!-- ol,ul,li 태그 (순서 또는 구분을 해줌) -->
<ol>
  <li><a href="1.html">HTML</a></li>
  <li><a href="2.html">CSS</a></li>
  <li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<!-- h1 태그 (제목) -->
<h2>JavaScript</h2>

JS, is a programming language that is one of the core technologies of the World Wide Web,
longside HTML and CSS.[11] Over 97% of websites use JavaScript on the client side for web page behavior,[12]
 often incorporating third-party libraries.[13] All major web browsers have a dedicated JavaScript engine to execute the code on users' devices.
</div>
</div>
</body>
</html>

 

동그라미 친

  <li><a href="1.html">HTML</a></li>
  <li><a href="2.html">CSS</a></li>
  <li><a href="3.html">JavaScript</a></li>

부분도 흰색으로 나오게 하고 싶은데

Document.querySelector 선택자를 무엇으로 지정을 해줘야 나올까요...

0
  • 답변 3

  • S_J
    232
    2022-01-15 16:54:43

    아래로 해 보세요.

    document.querySelector('ol li')...


  • oz oz
    10
    2022-01-15 23:52:46

    답글 감사합니다.

    해봤는데 안되네요ㅠㅠ,

  • oz oz
    10
    2022-01-16 01:17:13

    <input type="button" value="Night" onclick="

    document.body.style.backgroundColor='black';

    document.body.style.color='white';

    document.querySelector('a').style.color='white';

    document.querySelectorAll('li').forEach(i=>{

    i.style.color='white';

    i.querySelector('a').style.color='white';

    })

    ">


    로 해결되었습니다 !

  • 로그인을 하시면 답변을 등록할 수 있습니다.