CODEWITHSUNDEEP
javascript
Daniel Williams
Daniel Williams

Reputation: 2317

Dynamically adding CSS with javascript

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>

Upvotes: 0

Views: 107

Answers (4)

user2182349
user2182349

Reputation: 9782

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.

Upvotes: 0

nraduka
nraduka

Reputation: 129

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!

Upvotes: 0

HenryDev
HenryDev

Reputation: 4953

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>

Upvotes: 3

Obsidian Age
Obsidian Age

Reputation: 42304

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

Upvotes: 0

Related Questions