Adding css elements to javascript? [duplicate]

Question

Here is the piece of code which contains two CSS elements. del and ins

I want to include the whole CSS code into Javascript... But the code is one level above my experience...

Here is the CSS code:

del {
    text-decoration: none;
    color: #b30000;
    background: #fadad7;
}
ins {
    background: #eaf2c2;
    color: #406619;
    text-decoration: none;
}

And here is the piece of code which contains those classes:

convertChangesToXML: function(changes) {
  var ret = [];
  for (var i = 0; i < changes.length; i++) {
    var change = changes[i];
    if (change.added) {
      ret.push("<ins class='diff'>");
    } else if (change.removed) {
      ret.push("<del class='diff'>");
    }

    ret.push(escapeHTML(change.value));

    if (change.added) {
      ret.push('</ins>');
    } else if (change.removed) {
      ret.push('</del>');
    }
  }
  return ret.join('');
},

How to include CSS into Javascript here?

I don't want a separate CSS file ... Because I'm using a third party app called Storyline to create a web page and it's a lot easer to run a javascript code there without a css file

"I want to include the whole CSS code into Javascript" - Why? — Andreas
– Andreas, Commented May 24, 2019 at 14:54
The selectors are missing a . -> .del { ... } .ins { ... } — Andreas
– Andreas, Commented May 24, 2019 at 14:55
what do you mean by "include css into Javascript" exactly? I can't work out what you're trying to achieve. — ADyson
– ADyson, Commented May 24, 2019 at 14:55
"I got this code, how can I make it bad?" "But why?" "I want this." — Wimanicesir
– Wimanicesir, Commented May 24, 2019 at 14:59

Chris B. · Accepted Answer · 2019-05-24 14:59:56Z

0

You can set any CSS on any DOM element using the JavaScript style property.

document.getElementById("el").style.color = "blue"

I suppose there are valid reasons to do this, but you may want to ask if it's efficient to set all of your CSS in your script files.

answered May 24, 2019 at 14:59

Chris B.

5,7711 gold badge17 silver badges31 bronze badges

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

3 Comments

Sara Ree Over a year ago

The problem is I can't understand ret.push("<ins class='diff'>");

Sara Ree Over a year ago

How can i style something that I don't know what exactly is?

ADyson Over a year ago

What do you mean you don't know exactly what it is? The HTML is hard coded into your page

Collectives™ on Stack Overflow

Adding css elements to javascript? [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related