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: '­<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 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');
})();
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>