1

Me ha pasado en muchas ocasiones necesitar obtener un elemento con cierta regla CSS de una clase y no he podido lograrlo(mediante el uso de document.querySelector), tal vez sea simple pero hace poco empece con js. Dejo un código de ejemplo con el que trataba que al hacer click en el botón, el primer elemento de la clase .ejemplo que tenga un background:blue; cambie a un background:red;

<!DOCTYPE html>
<html>
<body>
<style>
.ejemplo{
background-color: blue;
}

#example{
background-color: yellow;
}
</style>
<h1 class="ejemplo">Oid mortales</h1>
<p class="ejemplo">el grito sagrado</p>
<h2 id="example" class="ejemplo">libertad</h2>

<button onclick="myFunction()">cambiar color</button>

<script>
function myFunction() {
  document.querySelector(".ejemplo [style= background-color: blue]").style.backgroundColor = "red";
}
</script>

</body>
</html>

1
  • Si solo vas a cambiar el primero, no importa el estilo que tenga, usa document.querySelector(".ejemplo").style.backgroundColor = "red";
    – Triby
    el 22 ago. 2020 a las 6:49

2 respuestas 2

2

El selector que aplicas no es correcto, aqui puedes leer mas al respecto, considera como selector el uso de:

  • el nombre de la etiqueta
  • la clase que tiene asignada
  • el id que tiene asignada la etiqueta
  • un selector descendiente
  • la combinación de estos, etc.

Entonces la solución que propongo:

  • Retoma todos los elementos que tienen la misma clase por medio de querySelectorAll() como ya te proponen en la otra solución
  • Dentro de la función del listener del botón itero los nodos de la lista que nos otorgó la función anterior
  • Para obtener el color de fondo que el o los elementos tienen actualmente uso getComputedStyle
  • Evalúo si el color de cada uno de los elementos es el azul declarado
    • Si eso es cierto entonces tomo a la variable que me identifica a cada nodo en cada iteración hecha y le cambio el color de fondo agregando la clase que ya lo tiene declarado
    • Para evitar que el usuario siga dando clicks y provoque que otro elemento que comparte la clase tome el nuevo color hago uso de pointer events con un valor de none junto con return para detener la ejecución del proceso en la función.

Código:

    <style>
      .ejemplo{
      background-color: blue;
      }
    
      #example{
      background-color: yellow;
      }
      .valor {
        pointer-events: none;
      }
    </style>
    <h1 class="ejemplo">Oid mortales</h1>
    <p class="ejemplo">el grito sagrado</p>
    <h2 id="example" class="ejemplo">libertad</h2>
    <button id="cambio">cambiar color</button>
    
    <script>
      let elementos = document.querySelectorAll('.ejemplo');
      let cambio = document.getElementById('cambio');
      
      cambio.addEventListener('click', () => {
        for (let elemento of elementos) {
          if (window.getComputedStyle(elemento).getPropertyValue('background-color') === 'rgb(0, 0, 255)') {
            elemento.style.backgroundColor = 'red';
            cambio.classList.add('valor');
            return;
          } 
        }
      });
      
    </script>
    
    </body>
    </html>

1
  • 1
    Funcionó muy bien tu código. Excelente explicación. Muchas gracias!. @BetaM
    – Ultimatux
    el 25 ago. 2020 a las 22:59
1

No puedes incluir un estilo dentro del parámetro del selector de la función querySelector().

Una posible solución es utilizar querySelectorAll para obtener todos los elementos de la clase y luego iterar por el arreglo para buscar el elemento al que quieres cambiar el color, cambiarlo y detener el recorrido.

Otra cosa que debes tener en cuenta es que, los atributos de estilo heredados del css no necesariamente se van a reflejar en la propiedad style. En Chrome, donde escribo esta respuesta, he utilizado una comparación != "red" para lograr el comportamiento que buscas:

function myFunction() {
  var elementos = document.querySelectorAll(".ejemplo");
  
  var numElementos = elementos.length;
  for (var i = 0; i < numElementos; i++) { 
    if (elementos[i].style.backgroundColor != "red") {
      elementos[i].style.backgroundColor = "red";
      break;
    }
  }
}
.ejemplo{
background-color: blue;
}

#example{
background-color: yellow;
}
<!DOCTYPE html>
<html>
  <body>
    <h1 class="ejemplo">Oid mortales</h1>
    <p class="ejemplo">el grito sagrado</p>
    <h2 id="example" class="ejemplo">libertad</h2>

    <button onclick="myFunction()">cambiar color</button>
  </body>
</html>

4
  • Muchas gracias, bien explicado tus aclaraciones y ya las pondré por practica, ahora bien, capaz no fui muy especifico en la pregunta, pero en este ejemplo quería que solo el primer elemento con fondo azul sea cambiado a rojo, si luego se tocase el boton ya no permita cambiar a los demás fondos
    – Ultimatux
    el 22 ago. 2020 a las 4:57
  • Pues, el código publicado justamente hace eso, siempre cambia el primero elemento con fondo azul (en realidad cambia el primer elemento con fondo no rojo) que pertenece a la clase.
    – jachguate
    el 22 ago. 2020 a las 4:59
  • primero si te fijas, también cambia el color del amarillo, pero justamente por eso, pensaba que poniendo una bandera en la sentencia if que permita saber que ya se cambio el primer elemento y luego si es que existiese otro elemento con fondo azul ya no lo cambie... Si presionas en el botón varias veces, cambia a todos los elementos. @jachguate
    – Ultimatux
    el 22 ago. 2020 a las 5:03
  • gracias justamente había leído ese pagina, de ahí que me surgió la idea de poder especificar el atributo style pero lo implemente mal evidentemente.@BetaM
    – Ultimatux
    el 22 ago. 2020 a las 5:05

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.