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>
document.querySelector(".ejemplo").style.backgroundColor = "red";