Estoy creando un js para un archivo HTML. Quiero manipular el css del div.
Una de las formas es usar esto: -
div.style.left = "30px";Sin embargo, en mi código, el usuario dice cómo se debe manipular el HTML. Quiero hacerlo dinámico. He establecido una variable con la propiedad que quiero cambiar así: -
let myProperty = "top", value = "30px";Ahora, quiero usar esto como mi modificador CSS en js así: -
myDiv.style.myProperty = value; setAttributes() que no funciona. ¿Cómo puedo hacer esto?
Debe usar corchetes para acceder a una propiedad de objeto usando una variable.
Por ejemplo:
let myProperty = "top", value = "30px"; myDiv.style[myProperty] = value;En su style.css, cree dos estilos diferentes con diferentes nombres de clase.
En su HTML, use el estilo predeterminado.
En tu JS:
const someHTMLTag = document.getElementById("demo") if(condition) { someHTMLTag.className = firstStyle } else { someHTMLTag.className = secondStyle }No tengo suficiente reputación para agregar un comentario para obtener más información, pero este es mi intento de brindarle una respuesta a lo que escribió en su pregunta original.
Puede proporcionar al div una class o una id en el HTML ( <div id="idName">...</div> ) y hacer que el archivo js acceda a él a través del DOM .
var myDiv = document.getElementById("idName"); myDiv.setAttribute("class", "className");O
var myDiv = document.getElementById("idName"); myDiv.style.value = "30px";