Estoy creando una herramienta para ayudar a las personas con discapacidad a acceder al sitio. Una de las muchas funciones que tiene la herramienta es cambiar el color: texto, encabezados, fondo.
¿Qué tengo ahora?
Cuando un usuario cambia la herramienta de búsqueda de elementos de color:
for(let i = 0, elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strong']; i < elements.length; i++) { documeny.querySelector(elements[i]).style.color = color; }Pero sé que será lento si hay muchos elementos con una etiqueta específica en la página. Quiero crear dinámicamente un bloque y guardar las propiedades css.
Nota: Por ejemplo, h1 tendrá más de una propiedad css, por ejemplo, color y espaciado entre letras.
¿Lo que quiero hacer?
quiero crear por ejemplo
<style> h1 { color: #000; letter-spacing: 0.5px; } </style>Y cuando el usuario elimina la propiedad de espaciado entre letras, la elimina del bloque y deja el color.
¿Cómo lo veo y qué necesito?
Crearé un bloque para todos los cambios de CSS y luego agregaré las propiedades de este bloque:
let c = document.createDocumentFragment(); let e = document.createElement("style"); e.id = 'toolbox-styles'; c.appendChild(e); document.head.appendChild(c); // Then document.getElementById('toolbox-styles').innerCSS.h1.letterSpacing = ''; // I know it doesn't exist, but It's more less what I think i need) ¿Dónde necesito ayuda?
no se como:
Agregue un nuevo CSS para, por ejemplo, h1 a uno existente (en el bloque);
Eliminar solo una propiedad de, por ejemplo, h1 CSS
Cree un nuevo css para, por ejemplo, h2 en bloque con css para h1:
<style> h1 { letter-spacing: 0.5px; color: red; } h2 { // Another element color: blue; } </style>Puede usar variables css para modificar los cambios de estilo en su código con js. Tiene getPropertyValue y setProperty para usar con este propósito.
Simplemente agregue algunas variables en su hoja de estilo a :root y modifíquela con setProperty .
Consulte estos enlaces para obtener más información:
CSSStyleDeclaration.setProperty()
CSSStyleDeclaration.getPropertyValue()
// Get the root element var r = document.querySelector(':root'); // Create a function for setting a variable value function setColor() { // Set the value of variable --blue to another value (in this case "lightblue") r.style.setProperty('--blue', 'lightblue'); } :root { --blue: #1e90ff; --white: #ffffff; } body { background-color: var(--blue); } h2 { border-bottom: 2px solid var(--blue); } .container { color: var(--blue); background-color: var(--white); padding: 15px; } .container button { background-color: var(--white); color: var(--blue); border: 1px solid var(--blue); padding: 5px; } <html> <body> <div class="container"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p> <button>Yes</button> <button>No</button> </div> <br/> <button type="button" onclick="setColor()">Change CSS Variables</button> </body> </html>