1

He encontrado muchas formas de editar css con JavaScript; pero no encontré una forma directa de agregar una propiedad a css. ¿Cómo modifico o agrego una propiedad directamente a mi class item ? ¿o no es posible?. por ejemplo en el css de la etiqueta div.

<div id="box" class="item"></div>
.item{
width:200px;
height:200px;
background-color:green;
display:block;

}

como incluir un position:absolute; en la class "item" o modificar display:block; a display:flex;

esta demás decir que soy un principiante en javascript, gracias.

8
  • 1
    @JordiTurell de donde sacas que no puedes ???
    – Excorpion
    Commented el 16 nov. 2021 a las 14:20
  • 2
    @kraud ¿Te fijaste en estas preguntas? (Y hay varias más en el sitio).
    – padaleiana
    Commented el 16 nov. 2021 a las 14:21
  • 1
    @JordiTurell eso no es lo que el está preguntando. El dice claramente "editar el css con javascript"
    – Excorpion
    Commented el 16 nov. 2021 a las 14:22
  • 1
    gracias por comentar, y orientarme; encontré este que me funciono. document.querySelector(".item").style.display= "none";
    – kraud
    Commented el 16 nov. 2021 a las 14:45
  • 2
    @JordiTurell si es posible modificar el archivo css desde JavaScript: developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/…
    – Emeeus
    Commented el 16 nov. 2021 a las 15:30

4 respuestas 4

2

Cualquier selector que pueda devolver mas de un elemento es necesario iterarlo y cambiar cada uno.

[...document.getElementsByClassName("item")].
forEach(e => e.style["background-color"] = "blue")
.item {
  width: 200px;
  height: 200px;
  background-color: green;
  display: block;
}
<div id="box" class="item"></div>

Hay una palabra en la pregunta que genera cierta confusión, "editar". Es posible "editar" los estilos definidos en una hoja de estilos en el sentido estricto, usando .insertRule, aunque no me parece conveniente para este caso, dejo un ejemplo de como sería posible:

const estilos = document.styleSheets[0];

console.log(estilos.cssRules[0].cssText); // <-- viejo


estilos.deleteRule(0);
estilos.insertRule('.item { width:200px; height:200px; background-color:blue; display:block; }', 0);

console.log(estilos.cssRules[0].cssText); // <-- nuevo
.item {
  width: 200px;
  height: 200px;
  background-color: green;
  display: block;
}
<div id="box" class="item"></div>

4
  • Excelente respuesta. Basado en lo que muestra OP, probablemente sería suficiente crear una nueva regla para #box.item y no es necesario modificar la original. +1.
    – Triby
    Commented el 16 nov. 2021 a las 17:44
  • Si, es mejor crear una regla nueva, pero quería mostrar la mecánica de "editar" una regla existente, hasta donde tengo entendido hay que reemplazar todo el selector.
    – Emeeus
    Commented el 16 nov. 2021 a las 17:56
  • @Emeeus gracias por tu respuesta, cuando dije "editar directamente" no fui preciso, me refería que cuando se edite alguna propiedad de una clase, los cambios solo se manifiesten en el class; ya sea en el archivo css o dentro del atributo class="" del html.
    – kraud
    Commented el 16 nov. 2021 a las 18:10
  • aceptare esta respuesta como solución, por aclarar el tema gracias!!!
    – kraud
    Commented el 16 nov. 2021 a las 18:13
0

algo asi ?

document.getElementsByClassName("item").style.position = "absolute";
document.getElementsByClassName("item").style.display = "flex";

Tambien soy relativamente nuevo en js, Saludos.

2
  • 2
    Correcto, pero para responder correctamente tienes que explicar como y que hacer. Te recomiendo leer Cómo responder para que sepas como hacerlo bien ;)
    – Excorpion
    Commented el 16 nov. 2021 a las 14:27
  • Bienvenido/a a Stack Overflow en español: haz el recorrido de bienvenida para conocer el funcionamiento del sitio. Lee Cómo responder: debes explicar brevemente el funcionamiento del código. Recuerda que este sitio no es un repositorio de código, por lo tanto se busca que el usuario no se limite netamente a copiarlo, sino a comprender su funcionamiento. Además, ten en cuenta que la pregunta probablemente sea una duplicada de varias otras ya existentes en el sitio.
    – padaleiana
    Commented el 16 nov. 2021 a las 14:30
0

respondiendo mi propia pregunta.

<div id="box" class="item"></div>

.item{
width:200px;
height:200px;

display:block;

}

encontré esto para modificar una propiedad: por ejemplo display document.querySelector(".item").style.display= "none"; eso ara que el elemento div no se muestre.

ahora para agregar una propiedad que no esta en la class item usare el id="box":

let box= document.getElementById('box');
box.style.backgroundColor = 'red';

eso ara que el div tome el color rojo.
No se si habrá otra forma, de hacer esto, seguiré leyendo... gracias! a todos por comentar mi pregunta.

3
  • woow! el querySelector es increíble, no solo modifica una propiedad sino tambien puede incluir una propiedad dentro de la clase. ya no tengo que aplicar un estilo en linea; sino simplemente: document.querySelector(".item").style.backgroundColor= "red" ; busca la clase .item y le agrega background-color: red;
    – kraud
    Commented el 16 nov. 2021 a las 15:39
  • Con este código no modificas la clase, sino el elemento seleccionado por querySelector() y, si revisas el elemento con el inspector del navegador, verás que se agregan estilos en línea. En caso de tener múltiples elementos de la misma clase, deberás usar querySelectorAll() y recorrer con un ciclo para modificar las propiedades deseadas a todos.
    – Triby
    Commented el 16 nov. 2021 a las 16:06
  • @Triby tienes razón, al menos no le agrego estilo en linea de forma explicita en el código html. me encantaría editar la clase directamente; pero por ahora solo tengo esta forma. la verdad, no estoy seguro de que se pueda editar la clase directamente...
    – kraud
    Commented el 16 nov. 2021 a las 16:21
0

Creo, no estoy seguro, lo recomendable seria usar clases diferentes si quieres cambiar una propiedad de forma dinámica y usar el código de la siguiente forma:

document.getElementById("box").classList.remove("tipo1");
document.getElementById("box").classList.add("tipo2");
.item{
width:200px;
height:200px;

display:block;

}
.tipo1{
background-color: green;
}
.tipo2{
background-color: red;
}
<div id="box" class="item tipo1"></div>

"Y al revisar con el inspector no aparece el estilo en linea que tanto quería evitar"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.