Dynamically adding CSS with javascript

Question

My code here is just a total guess, but how can I tell the javascript to apply a style to the element I've specified?

No jQuery please. Just plain old vanilla.

var sheet = document.createElement('style')
sheet.innerHTML = "DIV(1) > OL(0) > LI(1) {background-color: blue;}";
document.body.appendChild(sheet);

<div>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ol>
</div>
<div>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ol>
</div>

• RokumDev: this is maybe a dumb question but, why not plain CSS?
• RobG: The selector you're looking for might be DIV:nth-of-type(2) OL:nth-of-type(1) LI:nth-of-type(2).
• user2182349: Why do you want to use JavaScript to create CSS?
• RobG: @user2182349—it can be a very efficient way to style elements where you can't control the HTML (though the OP is a fairly basic way of going about it). Rather than adding a class or style directly to elements, just insert a new style rule.
• user2182349: @RobG - what about injecting a link tag with CSS using JavaScript?

Answer 1

Here's a working solution. Hope it helps!

var rule = 'DIV:nth-of-type(2) OL:nth-of-type(1) LI:nth-of-type(2) { background: blue; }',
 head = document.head || document.getElementsByTagName('head')[0],
 style = document.createElement('style');
 style.type = 'text/css';
 if (style.styleSheet){
 style.styleSheet.cssText = rule;
 } else {
 style.appendChild(document.createTextNode(rule));
}
head.appendChild(style)

<div>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ol>
</div>
<div>
 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ul>
 <ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 </ol>
</div>

• RobG: Cool, though I think the selector required is DIV:nth-of-type(2) OL:nth-of-type(1) LI:nth-of-type(2) and variable css might be better named rule. ;-)
• HenryDev: @RobG Updated my solution. Thanks for the input mate!

Answer 2

The problem is that you're creating a <style> element, which you can't add innerHTML to. In order to add styling to a dynamic element, all you need to do is make use of the style attribute:

var sheet = document.createElement('span');
sheet.innerHTML = "Example";
sheet.style.backgroundColor = 'cyan';
document.body.appendChild(sheet);

Hope this helps! :)

Answer 3

RokemDev already commented on this, but I agree. Why not use regular CSS like below?

I don't fully understand your sample:

sheet.innerHTML = "DIV(1)> OL(0)> LI(1) {background-color: blue;}";

If you meant you wanted the background set to blue of the the

first li element in an ol element inside the second div element

then the css would be:

div:nth-of-type(2) ol li:nth-of-type(1){
 background-color: blue;
}

Or if it is dynamically created then use both JS and CSS, since you most likely already have a reference to the element. Use the reference of the element and then add your css class to it.

.cssClassName{
 background-color: blue;
}
var div = document.createElement("div");
div.className += "cssClassName";

Check out the fiddle with both examples - https://jsfiddle.net/e5jj3s0s/

Hope this helps!

Answer 4

If you can inject JavaScript, you can inject CSS.

I suggest you create a CSS file and add it with the following:

var css = document.createElement("link");
css.rel = "stylesheet";
css.href = "css/style.css";
document.head.appendChild(css);

It will be much easier to maintain your design updates in the CSS file than as individual rules.