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>

The selector you're looking for might be DIV:nth-of-type(2) OL:nth-of-type(1) LI:nth-of-type(2). — RobG
– RobG, Commented Mar 17, 2017 at 2:14
@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. — RobG
– RobG, Commented Mar 17, 2017 at 3:21
@RobG - what about injecting a link tag with CSS using JavaScript? — user2182349
– user2182349, Commented Mar 17, 2017 at 9:23

HenryDev · Accepted Answer · 2017-03-17 02:21:35Z

3

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>

edited Mar 17, 2017 at 2:21

answered Mar 17, 2017 at 1:46

HenryDev

5,0136 gold badges31 silver badges70 bronze badges

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

2 Comments

RobG Over a year ago

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 Over a year ago

@RobG Updated my solution. Thanks for the input mate!

Obsidian Age · Accepted Answer · 2017-03-17 01:49:37Z

0

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! :)

edited Mar 17, 2017 at 1:49

answered Mar 17, 2017 at 1:44

Obsidian Age

42.5k11 gold badges54 silver badges76 bronze badges

Comments

nraduka · Accepted Answer · 2017-03-17 02:30:33Z

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!

user2182349 · Accepted Answer · 2017-03-18 00:12:27Z

0

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.

answered Mar 18, 2017 at 0:12

user2182349

9,8323 gold badges31 silver badges44 bronze badges

Collectives™ on Stack Overflow

Dynamically adding CSS with javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related