Adding CSS property on page load

Question

I'm trying to add css property to an existing rule on page load. It works with onclick event but does not run when the page loads. Here is the code:

HTML

<ul id="list">
    <li>aa</li>
    <li>bb</li>
<ul>

<a onclick="changeIt(); return false" href="#">change background color</a>

CSS

li {
    color: black;
}

Javascript (jQuery is not applicable in my case.)

function changeIt() {
 var theRules = document.styleSheets[1];
 theRules.insertRule("li{background-color: yellow;}", 1);
}
changeIt(); // doesnt run on page load

sroes · Accepted Answer · 2013-03-14 11:05:30Z

4

Try running it on window load:

window.onload = function() {
    changeIt();
};

answered Mar 14, 2013 at 11:05

sroes

15.1k1 gold badge58 silver badges75 bronze badges

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

Comments

j.karlsson · Accepted Answer · 2013-03-14 11:19:33Z

1

Your code probably doesn't work because the DOM is not ready when your function runs. There are several ways to check if the DOM is ready before executing any code. The most common way is to wait for the onLoad event to occur. In your case that might look something like <body onload='changeIt();'>...</body>

One of the problems with waiting for onLoad is that if the page take a long time to load, execution of your code will be delayed. And in fact the DOM can be ready even before the page has loaded. So another way to check DOM readiness is to use 'DOMContentLoaded' event, see http://www.javascriptkit.com/dhtmltutors/domready.shtml for more info.

answered Mar 14, 2013 at 11:19

j.karlsson

6534 silver badges14 bronze badges

Comments

Parrotmaster · Accepted Answer · 2013-03-14 11:06:04Z

1

You could always try <body onload="changeIt()"> It's not the same functionality as the jquery document.ready, but it'll work after the body has loaded.

answered Mar 14, 2013 at 11:06

Parrotmaster

6761 gold badge8 silver badges33 bronze badges

Comments

William · Accepted Answer · 2013-03-14 11:06:15Z

1

Have you tried putting the changeIt() call in the onload event of the body?

<body onload="changeIt()">
<!-- Body here -->
</body>

answered Mar 14, 2013 at 11:06

William

2211 silver badge8 bronze badges

Collectives™ on Stack Overflow

Adding CSS property on page load

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related