WEB2 - JavaScript

제어할 태그 선택하기

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. Jung Ik
    잘 배우고 있어요 !
  2. icdoit
    감사합니다!
  3. 에델
    에델 웅 카렌 완료
  4. Lee Sangjun
    사용자와 상호작용,..엄..청.. 어렵다.. ㅋㅋㅋ
  5. Lee Sangjun
    ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
  6. 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';
      ">
    • 반자동
      쉽네요
    • " '도 확실히 구분해서 써야하는군요!
    • 원스팩토리
      고잉님이 night를 누르면서 까맣게 만들면서 신나죠~했을때 까맣게 안되서 맨붕된 1인...ㅋㅋㅋ
      결국 까맣게 만들었답니다...
      감사해요..ㅎㅎ
    • 스페이스몽키
      감사합니다~!
    • jayxwoo
      오늘도 잘 봤습니다.
    • 대문자 소문자 실수가 있으면 안되는군요 ㅜㅜ!! 잘배웠습니다 감사합니다 ^^
    • 옥슬이
      ㄳㄳ 저도 궁금
      대화보기
      • 상상예찬
        김예찬 배재영
      • 이성준
        슈퍼 프로그래머 성준이 완료!
      • 키썬
        이고잉님 존멋
      • daaawnstar
        감사합니다.
      • Dreaming_Joyy
        오호!! 재밌어요!!!
      • 감사합니다
      • darong
        180320 끝! 감사해요!
      • 제갈량
        잘 봤습니다. 감사합니다 ^^
      • 조선
        Egoing님 강의가 초심자가 프로그래밍에 접근하는데 큰 도움이 되네요. 진입장벽을 낮추어 주시는 강의입니다. 고맙습니다..
      • Mingi Son
        180213 강의 감사합니다!
      • 180210 감사합니다
      • BY Chin
        감사합니다
      • 꼬맹파파
        backgroundColor에서 C를 대문자로 하는 것을 camelCase라고 하는거 같습니다.
        - javascript conventions.
        https://www.w3schools.com......asp
      • 멋진노무시키
        <<2018-01-22 - ??일차_?? 번째 강의>> --> 엉엉엉ㅠㅠㅠ!
        겁나 유익한 강의를 겁나 게을러서 겁나 미루면서 겁나 후회하면서 듣고 있습니다 ㅠㅠ 마음 다잡고 열심히 다시 달려보렵니다
      • PassionOfStudy
        << 2018-01-20 - 1일차 _아홉 번째 강의 >> --> 완료!


        검색하는 방법을 차근차근 알려주셔서 감사합니다. ㅎㅎ
        정보화시대에 구글링하는 능력을 키워야 겠습니다. 다양한 자바스크립트 함수들이 있네요 ^_^
      • yingying
        설명 감사합니다 :)
        대화보기
        • YAMAPSYCHO
          <input type="button" value="night" onclick="
          document.querySelector('body').style.backgroundColor = "black";
          ">
          위에 코드를 보시면 onclick = 하고 쌍따옴표 시작하고있기 때문에 black에 쌍따옴표가 붙으면 onclick에 들어간 쌍따옴표가 끝나는걸로 컴퓨터는 인식하여 black을 인식하지 못하는것입니다.

          쉽게 onclick="document.querySelector('body').style.backgroundColor = "까지 onclick이벤트가 인지를 하는것이고 그뒤에 black는 input에 적용된 존재하지않는 속성어로 컴퓨터가 인식한것 입니다.
          대화보기
          • yingying
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.backgroundColor="black";

            위의 'black' 작은 따옴표는 동작하는데
            아래의 "black" 큰 따옴표는 동작하지 않네요.
            작은따옴표와 큰 따옴표를 사용하는데 정해진 게 있나요? 저는 둘 다 같은 역할을 하는줄 알고있었습니다.
          • 감사합니다~
          • <input type = "button" value = "night" onclick = "document.querySelector( ).style.color = 'blue';">
            위의 코드에서 괄호안에 태그를 넣고 싶으면 그냥 '태그이름'을 넣으면 되고,
            만약에 응용해서 클래스나 아이디를 넣고 싶으면 '.클래스이름'이나 '#아이디이름'을 넣으면 되겠네요~!
          • 이유리
            감사합니다.
          • 저도 css부터 이어서 듣고 있는 학생입니다.
            아래 학우분과 같은 문제가 발생하였습니다.
            버튼을 클릭하였을시 <a>태그 의 첫번째인 맨위의 제목 WEB만 변경이 적용되었습니다.

            그래서 해결방법을 알아보다가 querySelectorAll()[]~ querySelectorAll()[] 배열을 사용하여
            해결이 되었습니다. 이후에 반복문을 배우고나면 더 깔끔하게 처리할 수 있을것같습니다.

            하지만 이보다 더 깔끔한 해결 방법이 있을것 같은데 무엇인가요
          • 사주
            안녕하세요~
            CSS부터 이어서 듣고있는 학생입니다.

            이어서 듣다보니 원래 쓰던 CSS예제파일에 자바스크립트 day/night 버튼을 이어서 만들었는데요
            BODY태그 전체에 background및 글씨color를 설정했는데도 CSS강의에서 디자인을 설정했던 H1태그 부분과 OL태그 부분은 적용이 안되더라고요...

            혹시나해서 <link rel="stylesheet" href="style.css"> 이걸 헤드에서 지우고 실습해보니 강의에서 나오는것처럼 잘 되긴 하는데.. 혹시 이런경우에는 제가 설정한 자바스크립트가 CSS보다 우선하도록 뭔가 또 조치를 취해야 하는 것인가요?
          • 치킨
            아 재밌어 감사합니다 !!
          • SanFrancisco
            그리고 querySelector는 하나의 태그만 선택할 수 있기 때문에 CSS의 선택자와 완벽히 호환되는 것은 아닌 것 같습니다. 예를 들어서 querySelector("p")라고 쓰면 모든 p태그 중 가장 첫번째 태그 하나만 선택된다고 나오네요. 검색해보니까 정말 CSS처럼 모든 태그를 선택할 수 있게 만들려면 querySelectorAll()을 사용해야 되는 듯 합니다.
          • SanFrancisco
            document.querySelector("body").style.color="black"인데 p태그 말고는 나머지 태그 문자 색이 변하지 않네요. h1나 a 태그는 색이 변하지 않아요. body 태그는 모든 본문 태그의 부모 태그이므로, body 태그의 color를 black으로 지정하면 모든 자식 태그의 color도 black으로 변해야 하잖아요? 그런데 color라는 속성이 a, h1~h6, p 등 문자열을 표현하는 모든 태그에 적용이 되지 않고, p 태그에만 적용이 됩니다.
          • 촌띄기
            'body'자리에 굳이 'body'가 아니라 다른 셀렉터가 와도 동작하는군요!
            css에서는 어떠한 따옴표가 오든 동작되는데
            JS에서는 무조건 작은따옴표( ' )가 와야되나요
          • -정리-
            document.querySelector('body').style.color = '*' ;

            하나 하나 정리해 가면,
            document - 이 문서의
            query - 질의하다
            Selector('body') - CSS의 셀렉터로 body
            color - CSS의 속성
            '*' - 속성값으로 *를 준다
          • egoing
            네네 그것도 동작할꺼예요. 여러가지 방법이 있답니다~
            대화보기
            • document.querySelector('body').style. 을 그냥 document.body.style. 로 써도 되는것 맞지요?
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기