Inject css inline into elements using js

Question

For example, my html code is as follows:

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add style inline in js</title>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="one">
     <div class="two">
        <a href="#">link</a>
     </div>
  </div>

  <script src="js/my-scripts.js"></script>
</body>
</html>

I want to select elements and style them in my-scripts.js file like css:

.one .two a:hover{color:red;}

I have a sample jquery code:

function injectStyles(rule) {
  var div = $("<div />", {
    html: '&shy;<style>' + rule + '</style>'
  }).appendTo("body");    
}

$("button").on("click", function() {
  injectStyles('a:hover { color: red; }');
});

https://css-tricks.com/snippets/javascript/inject-new-css-rules/

but I want to do this without using jquery and without using the button. (Apply styles after loading script file)

I want to define my css code in js and define each one separately as "inline" for each element.

Thanks to the professors

You can execute js code using the onload attribute on some elements. Cf []html tag onload(https://www.w3schools.com/tags/ev_onload.asp) — Ptit Xav, Oct 09 '21 at 18:44
For what reason are you attempting to do this? It's a terrible approach, and I'm sure there's a better method of doing whatever it is you require. — Rory McCrossan, Oct 09 '21 at 18:52
Sounds like a dupe of [this](https://stackoverflow.com/questions/15505225/inject-css-stylesheet-as-string-using-javascript) — mplungjan, Oct 09 '21 at 19:01

AnanthDev · Accepted Answer · 2021-10-09T19:10:56.203

You could create a template class in your css file like this

.colorOnHover a:hover {
  color: red;
}

And then you can use document.querySelector to get the element and add the colorOnHover to the classList of that element.

// your js file
const element = document.querySelector(''); // pass in the ID or the class of the element you want to add the changes to
(function() {
    element.classList.add('colorOnHover');
})();
// this will add `colorOnHover` class to the classList and apply the css defined to the class in your css file.

Make sure to link the javascript & css file (if any) using <script src = "pathHere" defer></script> and <link rel = 'stylesheet' href = "pathHere>" respectively

update : since the op didn't want to use querySelector

You could use document.createElement('style') and append it to the html file, it would be similar to manually inserting a tag

(function() {
    const styleEl = document.createElement('style');
    styleEl.textContent = '.one .two a:hover{color:red;}';
    document.head.append(styleEl);
    console.log('added new style tag');
})();

i have 8000 line css code. a faster method than queryselector. thanks — SR Dev, Oct 09 '21 at 18:56
you mean 8000 line html file? because queryselector gets the element from your html it has nothing to do with css, if that's the case, assign a common base class name for all the elements you want to make the change to and use `querySelectorAll()`, use a loop to iterate through all elements and add the template class to its classlist — AnanthDev, Oct 09 '21 at 19:03

score 0 · Answer 2 · answered Oct 09 '21 at 19:34

This how to inject your CSS to to <style> tag :
JS & jQuery code :

function injectStyles(rule) {
  $("style").append(rule);
}

$("button").on("click", function() {
  injectStyles('.one .two a:hover{color:red;}');
});

HTML code :

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>add style inline in js</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="css/styles.css">
</head>

<body>
  <div class="one">
     <div class="two">
        <a href="#">link</a><br>
       <button type="button">Make the link hover Red</button>
     </div>
  </div>

  <script src="js/my-scripts.js"></script>
</body>
</html>

Inject css inline into elements using js

2 Answers2