How to add css into Javascript?

Question

Lets say this is my javascript code:

var bottomChild = document.createElement('div');
bottomChild.id = 'bottomChildId';
bottomChild.style.width = '100px';
bottomChild.style.position = 'relative';
bottomChild.style.overflowY = 'scroll';
bottomChild.style.background = 'red';
bottomChild.style.top = '0px';
bottomChild.style.borderLeft = '0px solid #E4E7EA';
bottomChild.style.height = '200px';
document.body.appendChild(bottomChild);

Now I want to add following css into bottomChild:

::-webkit-scrollbar {
    width: 22px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

Please help in adding these css into that dynamic javascript div.

Possible duplicate of [CSS Pseudo-classes with inline styles](http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles) — Alexander O'Mara, Dec 17 '16 at 05:03
document.querySelector('style').textContent += `::-webkit-scrollbar { width: 22px; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; }` — Surya Purohit, Dec 17 '16 at 05:05

score 2 · Answer 1 · answered Dec 17 '16 at 04:58

2

You should add the css you want to a separate class, then use javascript to assign the class to the new element.

.target {
    width: 100px;
    position: relative;
    // etc.
}
.target::-webkit-scrollbar {
    width: 22px;
}
.target::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

javascript:

bottomChild.className = 'target';

answered Dec 17 '16 at 04:58

jaredsk

2,617
2
18
18

This is the cleanest version. Use your javascript to enhance this way. It also can lead to a nice gateway to transitions. – jjeining Dec 17 '16 at 08:02
Thanks a lot ~ It was incredibly helpful x) – Shashi Bharti Dec 17 '16 at 09:31

Ambrish Pathak · Accepted Answer · 2017-05-24T04:57:01.490

You can add class like this- div(id).className = 'target';

in your case add :

bottomChild.className = 'target';

Js:

var bottomChild = document.createElement('div');
bottomChild.id = 'bottomChildId';
bottomChild.style.width = '100px';
bottomChild.style.position = 'relative';
bottomChild.style.overflowY = 'scroll';
bottomChild.style.background = 'red';
bottomChild.style.top = '0px';
bottomChild.style.borderLeft = '0px solid #E4E7EA';
bottomChild.style.height = '200px';
bottomChild.className = 'target';
document.body.appendChild(bottomChild);

Css:

.target {
    background:#000000 !important;
    // etc.
}
.target::-webkit-scrollbar {
    width: 22px;
}
.target::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

Working fiddle :https://jsfiddle.net/mL8g3qLf/

Asons · Answer 3 · 2016-12-17T09:05:36.670

Adding class rules to your CSS file and then set them using javascript is the preferable way to do this, though sometimes that isn't doable.

Here is how you can add styles dynamically.

Note, since inline styles has higher specificity than an external CSS rule, one will need to use !important to override a style, as shown in below sample

window.onload = function() {

  var bottomChild = document.createElement('div');
  bottomChild.id = 'bottomChildId';
  bottomChild.style.width = '100px';
  bottomChild.style.position = 'relative';
  bottomChild.style.overflowY = 'scroll';
  bottomChild.style.background = 'red';
  bottomChild.style.top = '0px';
  bottomChild.style.borderLeft = '0px solid #E4E7EA';
  bottomChild.style.height = '200px';
  document.body.appendChild(bottomChild);

  addRule('#bottomChildId::-webkit-scrollbar', 'width: 22px;')

  addRule('#bottomChildId::-webkit-scrollbar-track', '-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px;')

  // Note how this does not work, since inline styles has higher specificity
  addRule('#bottomChildId', 'background: blue')

  // !important will be necesarry to override inline style
  addRule('#bottomChildId', 'width: 200px !important')
}

function addRule(s, r) {
  if (!hasStyleSheet(document)) return;
  var ss = document.styleSheets[document.styleSheets.length - 1];
  ss.insertRule(s + ' {' + r + '}', ss.cssRules.length);

  function hasStyleSheet(d) {
    if (!d.styleSheets) return false;
    if (!d.styleSheets.length) {
      var style = document.createElement("style");
      // style.setAttribute("media", "screen")
      style.appendChild(d.createTextNode(""));  //Webkit need this
      d.head.appendChild(style);
    }
    return true;
  }
};

How to add css into Javascript?

3 Answers3