쵸미
150
2020-01-15 00:25:41
6
238

지적좀 해주세요...



<!DOCTYPE html>
<html>
    <head>
        <style>
        .tstory_logo{  
        width: 80px;
        height: 72px;
        position: absolute;
    }
    .img_1{
        width: 24px;
        height: 24px;
        position: absolute;  
    }
    .img_1_box{
        position: relative;
        padding: 48px 0 0 56px; 
        width:24px;
        height: 24px;
    }
    #img_black {
        position:absolute;
        left:0;
        top:0;
    }
    #img_white{
        position:absolute;
        left:30px;
        top:30px;
    }
        </style>
    <script>
        var now=new Date;

      document.getElementById("img_black").style.display = "none";
    </script>
    </head>
    <body>
         <div class="tstory_logo">
        <div class="img_1_box">
            
            <a  class="img_1" href="Tstory 로그인창.html">
                <img id="img_black"src="이미지/TL로고_black.png">
                
                <img id="img_white"src="이미지/TL로고_white.png">
                
            </a>
           

        </div>
        </body>
</html>



<script>부분에 style을 찾을 수 없다는건가요..

뭐가 잘못된건지 조금만 알려주실 수 있으신가요..!


0
0
  • 답변 6

  • Gear
    241
    2020-01-15 00:32:38

    "Cannot read property 'style' of null"는  null의 'style' 속성을 읽을 수 없다는 뜻입니다.


    브라우저는 작성하신 내용을 순서대로 읽고, 읽는대로 실행한다고 압니다.

    https://webclub.tistory.com/630


    즉 document.getElementById("img_black").style.display = "none"; 까지 읽었을때는 img_black이라는 id를 가진 요소가 없는 것이죠.


    그래서 DOMContentLoaded 같은 이벤트가 발생했을 때 실행되도록 하거나, 거의 맨 아래쪽에 두거나, script에 defer 속성을 넣는 등의 방법을 사용하게 됩니다.

    1
  • 아말아무긋다
    329
    2020-01-15 02:36:51

    자바스크립트는 보통 제일 마지막에 나둬요. 굳이 페이지 시작부터 자바스크립트를 실행시키고자 한다면 헤더에 넣으시면 되고요.  페이지에 해당 id값을 가진 요소를 찾을 수 없어서 벌어진 일이에요.

    자바스크립트를 제일 밑단에 넣으면 잘될거에요.

    0
  • shaffron
    3k
    2020-01-15 09:11:20

    윗분들 말씀이 맞습니다.

    다만 꼭 head 영역에 스크립트를 작성하고 싶다면 아래 방법으로 작성하세요.

    window.onload(function() {
    
       // 정적파일 로딩이 끝난 후 실행해야 할 스크립트
    
    });


    0
  • NoDe
    3k
    2020-01-15 11:37:52

    script 는 될 수 있으면 body 아래 두는게 좋습니다. ( 개인적인 견해 )

    0
  • developer01
    358
    2020-01-15 17:56:00 작성 2020-01-15 17:58:58 수정됨
    <head>
    $( document ).ready(function() {
    //자바스크립트(제이쿼리) 코드 여기에 작성
    });
    </head>


    //위와 같이 작성하시면 됩니다.
    //해당 페이지의 문서가 준비되었을때 자바스크립트 코드를 실행하라는 의미입니다.
    //개인적인 생각으로 하단부에 넣는 것 보다 헤드 영역에 작성하는 것이 맞다고 봅니다.
    //속도면에서 큰 차이가 없고 사람이 보기에 가독성이 좋기때문입니다.
    //문서가 로드되고나서 실행하는 부분에 작성하는 코드외에 함수실행은 바깥에 작성해주
    시면 됩니다.

    <head>
    $( document ).ready(function() {
    //자바스크립트(제이쿼리) 코드 여기에 작성
    });

    function click_function(){
      //자바스크립트(제이쿼리) 코드 여기에 작성

    }
    </head>
    0
  • 쵸미
    150
    2020-01-18 02:28:31
    다들 정말 감사합니다!
    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.