[Solved] How to change CSS property before element is created?

by


I don’t know if that works in all browsers but you could append a new style-node inside your head section like this:

var marginTop = ...;
var node = document.createElement("style");
node.setAttribute("rel", "stylesheet");
node.innerHTML = "div { margin-top: " + marginTop + "px; }";
document.head.appendChild(node);

Your head element must obviously exist for this to work.
I know it’s ugly and I can’t recommend using this but I think it’s what you wanted.

UPDATE:
I found another way, which in my opinion is better because of the API you can use:

// insert a stylesheet if you don't have one
if (document.styleSheets.length == 0) {
    document.head.appendChild(document.createElement("style"));
}

var marginTop = ...;
var rule = "div { margin-top: " + marginTop + "px; }";
document.styleSheets[0].insertRule(rule);

For more information you may visit http://www.w3.org/TR/DOM-Level-2-Style/css.html
Again I don’t know if all browsers support this.

solved How to change CSS property before element is created?