WEB2 - JavaScript

제어할 태그 선택하기

소스코드

변경사항

 

댓글

댓글 본문
  1. 양빵
    220609
  2. onehae
    220602
  3. 진진리
    22.05.18
  4. 220516
  5. 달수
    20220513
  6. 우정
    <style>a{color:inherit}</style>

    설정한 값으로 링크컬러가 상속되도록 구성하면 어떨까요?
    대화보기
    • rhdwhdgu
      22.04.26
    • 고배배
      220424
    • 이정훈
      22.04.12
    • 고통받는티모
      혐의점이 2가지 보입니다.

      1. head 부분에 style.css 링크
      - style.css 부분에 적용한 çss가 우선순위로 적용됐을 수 있습니다.

      2.ol 태크 부분
      목차가 a 태그로 감싸져있는데, 이로인해 하이퍼링크 çss가 우선순위로 적용되어서 색이 안바뀔 수 있습니다.

      style.css링크한거 지우고, a태그 지우니까 색이 다 바뀌네요
      대화보기
      • cookiey
        <html>
        <head>
        <title>WEB1 - welcome</title>
        <link rel="stylesheet" href="style.css">
        </head>
        <body>
        <h1><a href="index.html" style="color: #99FF99;">WEB</a></h1>
        <div id="grid">
        <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>
        <li><a href="video.html">Video</a></li>
        <li><a href="reply.html">Reply</a></li>
        </ol>
        <div id="article">
        <h2>WELCOME HOME</h2>
        </div>
        </div>
        <input type="button" value="day" onclick="
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        ">
        <input type="button" value="night" onclick="
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
        ">
        </body>
        </html>
        ---------------------------------------------------------------------------------------------------
        여기서 backgroudColor만 적용되고 color 는 적용안되는 이유는 뭘까요?(텍스트 색이 안바뀜.. )
        저의 경우 <div id="grid"> 부분이 적용된 상태에서 하려니깐 그런것 같은데..
        이 때 모든 텍스트 색 깔끔히 변경가능한 해결책 아시는분 계신가요..
      • 이윤
        22.04.05
      • 220404
      • B_frog
        220329
      • 너구리기린
        2022.03.29
      • DH니스
        2022.03.27
      • 유끼끼
        css 실습 후 에 이 수업을 진행시 a태그는 색이 바뀌지 않음
        이것 저것 다해봤는데
        a태그 각각에 아이디를 넣어주고
        각각 컬러를 화이트로 설정해야 바뀌었음..
        클래스 태그로 한번에 하려고 해도 안바뀜 ;;
        document.querySelector('body').style.color = 'white';
        document.querySelector('#color0').style.color = 'white';
        document.querySelector('#color1').style.color = 'white';
        document.querySelector('#color2').style.color = 'white';
        document.querySelector('#color3').style.color = 'white';
        다른방법 있을거 같은데 지금 지식으론 이게 최선인듯
      • html어렵
        220316
      • new 개발자
        20220314
      • 지구
        2022.03.13
      • 완료
      • 2022.02.23 완료
      • 드림보이
        2022.02.16. WEB2 - JavaScript - 제어할 태그 선택하기 파트 수강완료
      • 미래에 후회안할 자신있어?
        2022-02-10 완료
      • 소피진
        2022-02-09 완료
      • 티타
        220209
      • 20220125
      • qor0860
        링크가 걸려있는 태그에도 글자를 바꾸고 싶은데 <h1>태그부분에는 글자가 바뀌는데 <ol>태그 부분에는 글짜 색깔이 바뀌지가 않네요.. 뭐가 문제일까여?? 코드는 아래에 있는그대로 했습니다..
        <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='dimgrey';
        document.querySelector('a').style.color='white';
        ">

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

        ">
        <div id="grid">
        <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">
        <h2>javascript</h2>
        <p>JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed,
        prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS,
        </p>
        </div>
        </div>
        </body>
      • aristia
        2022.1.24
      • 아까그애
        2022-01-20 완료
      • 임앤강
        2022-01-20
      • 맛없는콩두유
        22.10.19 완료
      • DinoBox
        20220119
      • 열정jk
        220115 감사합니다
      • 지원이아빠
        style.border-right = '1px white solid' 는 CSS 문법이구요,
        참고 : https://www.w3schools.com......asp


        javascript 문법으로는 다음과 같이 해야하네요.
        document.querySelector('ol').style.borderRight = "2px green solid";

        참고 : https://www.w3schools.com......asp
        대화보기
        • 이거왤케어려워
          211230 감사합니다!
        • commonerd
          2021-12-22
          나이트모드 데이모드
          <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' ">
        • commonerd
          공감합니다~ 이고잉님 최고!
          대화보기
          • 알고리즘
            내년이면 35살 입니다. 직업은 개발자가 아닌, 30명정도 사이즈의 회사를 운영하는 대표입니다.

            어릴적 꿈은 항상 프로그래머 였는데, 어쩌다보니 전혀 상관없는 축산물 유통 / 가공 전문회사를 운영중입니다. wordpress를 공부하고 직접 웹서버를 열어 회사 홈페이지를 만든 경험이 있습니다. 단순히 돈을 지불하고 의뢰를 하면되지만, 그 누구보다도 제가 하고있는 일을 잘 설명할 수 있는 사람은 바로 '나'라는 생각에서 직접 만들게 된것입니다.

            단순한 웹페이지 제작을 너머 이제는 회사 업무자동화를 꿈꾸며 자바스크립부터 시작해 파이썬으로 마무리 짓는 그날을 꿈꾸며 오늘도 퇴근 후 늦은시간까지 모니터를 들여다 보고 있습니다.

            이고잉님, 너무 감사합니다. 제 목표를 달성하게 되면 후원회원으로 참여하고 싶습니다.
            목소리 하나하나, 포스팅 내용 하나하나 정성이 그대로 느껴집니다.
          • 소설가
            2021-12-16 완료
            고맙습니다.
          • onclick 속성뒤에 지정하는 내용은 javascript언어로 작성입니다.
            대화보기
            • 완료
              문서내의 태그를 선택할 때는 document.querySelect('태그명') 하고 뒤에 .sytle.backgroundColor와 같은 식으로 CSS 속성값을 지정.

              주의.
              CSS에서는 background-color 속성이지만, Javascript에서는 -없애고, color를 Color로 변경해야 함.
            • 롤링
              오후 1:37 2021-12-14
              앞서 CSS 에서 만들었던 ol에 대한 border-right line이 style.css에 저장되어 있는데 document.querySelector('head.ol').style.border-right = '1px white solid' 로 두면 작동을 안하네요...
              이건 더 알아봐야겠습니다.
            • 민택기
              21.12.1 완료
            • 21.11.24
            • survive
              21.11.22
            • 개발맨
              완료
            • 도쿄스나이퍼
              자바스크립트는 바디태그안에 <script></script>태그에 입력하여 적용하는거로 알고있는데요
              왜 <script>태그 입력없이 그냥 진행한건가요??

              document.quertSelector~로 시작하는 코드로 night day 바꾸는건 자바스크립트가 아닌건가요??
              사용자로부터 입력값을 받아서 그에따라 동적으로 night day로 상호작용하여 바꿔주는게 자바스크립트 아닌가요??
            • 21-10-28. 7타.
            • 21-10-27. 6타.
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기