WEB2 - JavaScript

제어할 태그 선택하기

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 클래스를 정의하셨겠죠?
    ID를 호출할땐 #id명
    클래스를 호출할땐 .class명 으로 해주시면 되용
    대화보기
    • didQk
      완료!
    • 오수현
      style tag 에서 지정한 부분도 색깔을 바꾸고 싶어서 검색해 봤는데 아무리 찾아도 어떻게 하는지 모르겠어요
      id 는 찾았는데 class 는 색 바꾸는 코드를 해도 첫번째 class 코드만 색이 바뀌는데

      class 로 지정한 모든 태그가 색깔이 바뀌도록 하려면 어떻게 해야될까요ㅜㅜ 알려주세요ㅠㅠㅠ
    • Seohee Kim
      완료
    • 이달
      완료
    • dudwn7504
      저 javascript를 사용한 night, day 버튼을 CSS처럼 다른 파일에도 모두 똑같이 적용시키려면 어떻게 해야 되나요?
    • 2019-02-18 완료
    • 우도순
      완료
    • 재인
      완료
    • 호두
      검색하는 방법
    • 발헤
      감사합니다. 완료
    • 김창완
      오늘은 여기까지 !!감사합니다~~
    • Juyeon Heo
      완료!
    • 매직와인
      완료 감사합니다^^
    • 지미츄
      완료
    • gravity251
      완료
    • 이수하
      완료
    • 함가죠
      완료 감사합니다:)
    • 김수빈
      완료
    • Aimhee
      완료
    • 냄민새감
      나이트 데이가 작동을 안합니다 도와주세요!
    • 한강
      신기하네요. ^^!
    • 갈아만든공돌이
      감사합니다ㅠㅠ
      그런데 콘솔에서 document.getElementsByTagName('ol');을 실행하면 왜 HTMLCollection [ol]이라는 결과가 나오나요?
      이후 강의에서 확인할 수 있는 내용인가요 아니면 제가 따로 찾아봐야 하는건가요?
      대화보기
      • 2019.1.11 감사합니다^^
      • 이고잉팬
        수고하셨어용~
      • 최종민
        앗 그렇군요 말씀대로 했더니 잘됩니다 오탈자에 유의해야겠어요 감사합니다!!!
        대화보기
        • Donghyeon
          글자 색을 지정하는 부분에 오자가 있어요~ Color - color
          document.querySelector('body').style.Color = ''; 로 적으셨는데,
          document.querySelector('body').style.color = ''; 로 적으셔야 합니다.


          주간모드는 원하는대로 나왔는데 야간에서는 문제가 생겼다기보다는, 저 오자 때문에 글자색은 야간모드에서의 의도(white)대로 안 변하고 기존값(black)이 유지돼고 있던 거예요.
          배경이 검정색 일땐 글씨도 검으니 안 보이고, 배경이 하얀색 일땐 하얀색인데 글씨는 검정색이니까 보이는 식으루요.
          대화보기
          • 최종민
            <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';
            ">
            이렇게 코드를 짜서 넣었더니 Day 버튼을 누르면 원하는 대로 주간모드(배경 흰색, 글씨 검은색)가 되는데 Night 버튼을 누르면 통째로 검은색이 되어버리네요.. 이유가 뭔지 모르겠습니다 ㅠㅠ 혹시 조언 주실 수 있는 분이 있으시다면 알려주시길 바라요. 감사합니다!
          • ckstn0777
            a color 속성을 inherit으로 바꾸면 잘 해결됩니다!. inherit 속성이 상속이라는 말이거든요.
          • 돼지천재
            감사합니다.
          • 연습생
            안녕하세요. 일단 좋은 강의를 보게되어서 영광입니다.
            질문이 하나 있는데요.
            위와 같이 a tag의 color도 전부 바꾸고 싶은데 querySelector('a')사용시 아래와 같이 두개중에 첫 번째꺼만 바뀌네요..
            검색을 해봐도 querySelectorAll을 사용한 여러개의 tag만 선택하는 것만 나오는 거 같은데. 어떻게 해야 할까요

            코드는 아래와 같고 a tag는 css파일에서 기본 color:black으로 지정해놨습니다.~

            <div id="AA">
            <ol>
            <li> <a href="somethingA .html" target="_self"> somethingA </a> </li>
            <li> <a href="somethingB .html" target="_self"> somethingB </a> </li>
            </ol>
            </div>

            좋은 강의 감사합니다!
            ===========================================================
            아! 아래 해결법은 celine님이 달아놓으셨네요 감사합니다.
            복수개일 경우 for문을 사용해야 하나 보군요 .
          • 늦었지만 지금이라도
            감사하게 잘 듣고있습니다.
            실습하다가 궁금한점이 있어서 좀 문의 드립니다.
            이 부분도 CS처럼 묶어서 다른 . html로 한번에 적용 하는 방법이 있나요 ?
            <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';
            ">

            이부분만 따로 ?파일명으로 묶어서 html로 간단하게링크 하는 문장이 알고 싶습니다.
          • 키보드치는남자
            잘들었습니다
          • 아직은걱정이많은나
            javascript select tag by css selector
            자바스크립트 문법에 따라서 웹브라우저에게
            바디 태그를 선택하도록 명령하기.
            자바스크립트에서 선택합니다. 무엇을? css의
            선택자를 이용해서

            이제 선택을 했으니깐 body에 'style'이라는
            속성을 어떻게 자바스크립트로 넣을 수 있는 가를 알아봐야합니다.


            body태그에 style은 background-color:black을 하고 싶습니다.
            javascript style background-color
          • 아직은걱정이많은나
            input즉 입력이라는 것은 누가 입력하냐면 그 웹을 사용하는 사용자가 하는 것이고.
            만약에 사용자가 버튼을 클릭하면 css에서 선택자를 불러오는 기능을 자바스크립트로 표현한건가 생각이 됩니다.
            사용자(User)의 입력으로 인해 화면에서 출력되는것이 바뀌는것이 움직여지는 것이니 동적이라고 말하는 것이고.
            사용자의 의지로 움직일 수 없이 정지 되어 있는 것을 정적이라고 말하는 것 이라고 이해했습니다.

            사용자가 무엇을 입력 (클릭하는 행위)으로 인해 바뀌는것(출력)이 바로 자바스크립트의 역할인가 생각하고 있습니다.
          • 아직은걱정이많은나
            크롬으로 하셨나요?

            혹은 큰따옴표/겹따옴표 ""랑 '' 작은따옴표/홀따옴표랑 오타를 내지는 않으셨는지?
            저도 한번 시도해봤는데, 제 생각에는 ""로 치면 문자열처리 되서 안되는거 같네요.
            대화보기
            • 나현
              똑같이했는데 적용이 안되네요ㅠㅠ 코드적어두신거 복사해서 붙이니까 작동을 하긴하는데 토시하나 틀린게 없는데 왜 그런거죠ㅠㅠ
            • Jung Ik
              잘 배우고 있어요 !
            • icdoit
              감사합니다!
            • 에델
              에델 웅 카렌 완료
            • Lee Sangjun
              사용자와 상호작용,..엄..청.. 어렵다.. ㅋㅋㅋ
            • Lee Sangjun
              ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
            • celine
              style.css 내용을 변경할 필요없이

              <input type="button" value="night" onclick="
              document.querySelector('body').style.backgroundColor = 'black';
              document.querySelector('body').style.color = 'white';
              var as = document.getElementsByTagName('a');
              for(var i=0; i<as.length; i++){
              as[i].style.color = 'white';
              }
              document.getElementsByTagName('ol')[0].style.color = 'white';
              ">

              이렇게 하면 되더라구요 !
              대화보기
              • 안녕하세요~

                강의를 통해서 코딩을 배워가는 학생입니다!

                강의영상에서 h1태그가 걸려있는 web과 ol태그가 걸려있는 리스트에 대해서는

                어떻게 해야 night모드를 했을때 하얗게 적용을 할 수 있을까요?


                + ( night 모드를 했을때 web과 옆에 리스트가 검은색으로 나타나서 보이지 않아, style.css에 있던

                a { color:black; } 부분은 삭제했습니다.)
              • 감사합니다!!
              • 감사합니다.
              • 임재현천재
                완료!감사합니다!
              • 내이름은이한샘
                영상 잘 봤습니다. 항상 감사합니다^^.!
              • 로버트한
                감사히 잘 보았습니다. ^^
              • <input type="button" value="night" onclick="
                document.querySelector('body').style.backgroundColor = 'black'; //night버튼 누를시 body의 백그라운드 컬러 black
                document.querySelector('body').style.color = 'white'; //night 버튼 누를시 body의 폰트컬러 white
                // ' ' " " 주의!
                ">
                <input type="button" value="day" onclick="
                document.querySelector('body').style.backgroundColor = 'white';
                document.querySelector('body').style.color = 'black';
                ">
              버전 관리
              egoing
              현재 버전
              선택 버전
              graphittie 자세히 보기