0

Desde que empecé a aprender del DOM e tenido el mismo problema, quiero editar los estilos css de un elemento que se identifique con una clase, pero no puedo modificar el estilo aun así en la consola aparezca el elemento seleccionado, e probado varias maneras de sintaxis de selección, pero no funcionan...¿alguien puede decirme por qué?

no puedo pasar el html porque es muy largo pero tengo una sospecha, a veces pienso que es la manera en la que tengo el script, lo tengo con el atributo defer en la cabeza, eso es el problema?

aqui les dejo el javascript:

const filtro = document.getElementById('filtro');
const filtroDiv = document.querySelector('.filtroDiv');
filtro.addEventListener('click', () => {
    filtroDiv.style.remove= 'display:none';
})
6
  • 2
    No se qué estás tratando de hacer con filtroDiv.style.remove = 'display:none';, si quieres aplicar esa propiedad de CSS, tendría que ser filtroDiv.style.display = 'none';, o si lo que quieres es remover esa propiedad, prueba con filtroDiv.style.removeProperty('display');, o a lo mejor vendría conveniente usar filtroDiv.style.display = 'block'; en vez de quitar la propiedad. Commented el 14 jun. 2023 a las 1:38
  • 1
    No pases todo el HTML, prepara un ejemplo mínimo verificable. Eso aumentará las probabilidades de obtener respuestas con la ayuda que buscas.
    – jachguate
    Commented el 14 jun. 2023 a las 1:42
  • 1
    Si seleccionas elementos por clase, obtienes un array de objetos (aunque sea de 0 o 1 elementos), ya que podrían ser varios, así que para modificar el primero seria filtroDiv[0].style.propiedadCSS Después de .style. debe ir una propiedad CSS, y "remove" no es ninguna. Si quieres modificar el valor de la propiedad CSS "display" deberías hacer .style.display="nuevo_valor" Commented el 14 jun. 2023 a las 2:10
  • 1
    @Cris223511.dev muchas gracias, también era una duda que tenia,primera vez que uso stack y me responden rapido pense que tardaria dia Commented el 14 jun. 2023 a las 6:44
  • @ArnauCastellví muchas gracias por tu respuesta ,ese es un problema al cual me refiero...por alguna razón elijo el elemento que deseo con [] pero aun así no puedo editar el style ,yo pensaba que no encontraba el elemento pero cuando lo pongo en consola aparece el elemento que necesitó ,sabes que esta pasando? Commented el 14 jun. 2023 a las 6:48

1 respuesta 1

0

En el ejemplo de abajo te dejo un ejemplo de cómo cambiar el estilo de los elementos basados en su clase.

Para ello me valgo de querySelectorAll que nos devuelve un arreglo con todos los elementos que cumplan con el selector, en este caso, las clases resaltado o grande.

En cada caso, voy iterando por los elementos del arreglo y cambiando su estilo (uno a uno). Como ejemplos, voy cambiando el tamaño de letra y el color de fondo, pero es algo que puede hacerse para cualquier propiedad del estilo de los elementos.

function cambiarGrandes() {
  document.querySelectorAll(".grande").forEach((el) => {
    el.style.fontSize = "1em";
  });
}

function cambiarRojos() {
  document.querySelectorAll(".resaltado").forEach((el) => {
    el.style.backgroundColor = "white";
  });
}
.resaltado {
  background-color: red;
}

.grande {
  font-size: 2.5em;
}
<div id="uno">
  <h1>Título</h1>
  <div id="dos" class="resaltado">
    <p class="grande">Hola Mundo</p>
  </div>
  <div id="tres">
    <p class="grande">Hola mundo</p>
    <p class="resaltado">Hola mundo (restaltado)</p>
    <p class="grande resaltado">Hola mundo (grande restaltado)</p>
  </div>
  <button onClick="cambiarGrandes()">Cambiar grandes</button>
  <button onClick="cambiarRojos()">Cambiar rojos</button>
</div>

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.