Cannot read property 'style/ css/ attr/ setAttribute' of null

Question

I tried to resize a svg (which i did put into the div). I tried out:

    document.getElementById('pload').setAttribute("height", "15%");

    document.getElementById('pload').css("height", "15%");

    document.getElementById('pload').attr("height", "15%");

    document.getElementById('pload').style.height = "15%";

I always get "Cannot read property 'style/ css/ attr/ setAttribute' of null.". I can interact with document.getElementById('pload') but can't change any style properties. Everything should already be loaded (see JS: EventListener). Else there are just some timers in the function, nothing should interfere with the svg/div (i just change some style properties in the svg with jquery, no id's or var's are shared. Can interact with svg id's just fine, "EventListener" "load" also works fine). I have no idea anymore what this problem could be.

HTML:

    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </head>
    <body>
        <div id="pload">
           //svg (#pagepreload) here
        </div>
    </body>
</html>

CSS:

    #pagepreload *{
       visibility: hidden;
    }
    #pagepreload #mappin, #pagepreload #ring {
       visibility: visible;
    }
    #pagepreload{
       position: absolute;
       padding: 0;
       border: 0;
       margin: 0;
       height: 100%;
       transform: translate(-50%, -50%);
       left: 50%;
       top: 50%;
    }
    #pload{
       padding: 0;
       border: 0;
       margin: 0;
       position: relative;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       height: 30%;
       transition: top 1s ease-in-out, left 1s ease-in-out, height 1s ease-in-out, transform 1s ease-in-out;
    }

JS:

    window.addEventListener("load", afterload(), false);
    function afterload(){
       document.getElementById('pload').style.height = "15%";
       //timers here (accessing svg content)
    };

Thanks for your time and effort in advance.

Alimon Karim · Accepted Answer · 2020-01-19 18:11:24Z

3

Your script loaded before dom parse.

Use defer to solve this problem.

<script src="script.js" defer></script>

Or use your script link before end of body tag.

answered Jan 19, 2020 at 18:11

Alimon Karim

4,48910 gold badges47 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mgarcia · Accepted Answer · 2020-01-19 18:09:41Z

1

You are calling the afterload method when you are attaching it to the load event.

Do this instead:

window.addEventListener("load", afterload, false);
function afterload(){
    document.getElementById('pload').style.height = "15%";
    //timers here (accessing svg content)
};

answered Jan 19, 2020 at 18:09

mgarcia

6,3863 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'style/ css/ attr/ setAttribute' of null

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related