How to change the color of a div before loading the page through a script?

Asked

Viewed 2,771 times

1

I’m trying to pick the background color of a div through a script. That is, my goal is that as soon as the page appears it has already run the script and has appeared the color that the script has selected.

My question for now is:

<body onload="funcaoquemudaacor()">

Apparently, the parameter onload it doesn’t feel right, and it’s not working.

Is that my mistake? Solutions?

javascript html

  • Why not use CSS? Really onload will only load the Javascript function after loading the body. An alternative is to make the content of the page invisible and after clicking make it visible with the desired color.

  • Because the script is that will choose the css that will use, to be able to change the background color of the div as the case... I will try, thanks.

  • More details are needed to give you a coherent answer to what you want to do. HTML will be produced dynamically by your Javascript, or the page is delivered already containing HTML and Javascript should change the color as soon as possible?

  • If there is no way to add the color in the HTML generation by the server, an alternative is to hide the element by default, then when the page loads, change the color and show the element.

  • Vote today! Vote tomorrow! Vote always! Vote consciously! Your vote is very important to our community, contribute to us, and help make Stack Overflow in Portuguese (Sopt) bigger and bigger. You can learn more at: Vote early, vote often

4 answers

3


If the goal is to change the color of a particular div, the first moment it can be done is so that the div will exist on the page. For example:

<!-- esta é a sua div: -->
<div id="minhadiv">...</div>
<script>
funcaoquemudaacor();
</script>

Of course, the funcaoquemudaacor also needs to exist at that time, so it must be declared in the same block <script> that the call, or included before that block if it is an external js file.

The onload that you used to wait the entire page to load, including all images and other external files.

  • In fact, Voce can declare both before and after invoking a function, many web developers have the practice of writing some JS codes at the end of html to have a faster loading of the screen components, since js only runs after every screen loaded even.

  • @Michelsimões I edited to make it clearer what I meant. It’s not true that js only runs after the entire screen has loaded, each block/tag script.

1

Try using the style attribute:

<div style="background-color: #000000">

</div>

0

the way to declare on onload is correct.... put us to work please... you can test q will probably work

 <script>
       function funcaoQueMudaDeCor(){
         document.getElemmentById('idDaDiv').style.backgroundColor= "#000"; 
      }
 </script>

Remembering that for this function to work what comes after the style. must be the same property assigned in the css of div. If you try with a div declared in css with the attribute "background: " it will probably not be overwritten by the code js "backgroundColor". Qqer thing posts all js and css q helps.

-2

Use the . ready of jquery. I think it works. I think q will have to put the script in <head>

  • 4

    The ready does not execute before loading the page, no matter where it is.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.