Por ejemplo, mi código html es el siguiente:
<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>Quiero seleccionar elementos y diseñarlos en el archivo my-scripts.js como css:
.one .two a:hover{color:red;}Tengo un código jquery de muestra:
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/
pero quiero hacer esto sin usar jquery y sin usar el botón. (Aplicar estilos después de cargar el archivo de script)
Quiero definir mi código css en js y definir cada uno por separado como "en línea" para cada elemento.
gracias a los profes
Podrías crear una clase de plantilla en tu archivo css como esta
.colorOnHover a:hover { color: red; } Y luego puede usar document.querySelector para obtener el elemento y agregar colorOnHover a la lista de clases de ese elemento.
// 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. Asegúrese de vincular el archivo javascript y css (si lo hay) usando <script src = "pathHere" defer></script> y <link rel = 'stylesheet' href = "pathHere>" respectivamente
actualización : ya que el operador no quería usar querySelector
Podría usar document.createElement('style') y agregarlo al archivo html, sería similar a insertar manualmente una etiqueta
(function() { const styleEl = document.createElement('style'); styleEl.textContent = '.one .two a:hover{color:red;}'; document.head.append(styleEl); console.log('added new style tag'); })();Esta es la forma de inyectar su CSS a la etiqueta <style> :
Código JS y jQuery:
function injectStyles(rule) { $("style").append(rule); } $("button").on("click", function() { injectStyles('.one .two a:hover{color:red;}'); });Código HTML :
<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>