Change CSS display value in-line on page load

Question

Inline in the HTML (without using a separate javascript file or code block) how to change display of element on page load? I want it to go from display:none back to default.

I've tried this:

<div style="display:none" onload="function(){this.style.display = 'block'}">
   hello
</div>

And this:

<div style="display:none" onload="this.style.display = ''">
    hello
</div>

But doesn't work, thanks.

https://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element — l2aelba, Nov 30 '17 at 15:16

score 2 · Answer 1 · answered Nov 30 '17 at 15:18

As I wrote in comment under question, there is no onload event for div.

You can use this code, it changes the divs display value when document is loaded.

document.onload = document.getElementById('div').style.display = 'block';

<div style="display:none" id="div">
   hello
</div>

Change CSS display value in-line on page load

1 Answers1