¿Cómo encuentro el elemento haciendo coincidir su valor de propiedad CSS?
Por ejemplo, si el color de fondo del elemento es verde, haga algo...
const elm = document.getElementsByClassName('elm'); [...elm].forEach(function(s) { //find the element which background color is green //then console.log(theItem) }) .elm { width: 200px; height: 100px; } .elm1 { background-color: red; } .elm2 { background-color: green; } .elm3 { background-color: blue; } <div class="elm elm1"></div> <div class="elm elm2"></div> <div class="elm elm3"></div>Puede usar el método window.getComputedStyle() en cada uno de sus elementos para comprobar y ver si un elemento tiene su color de fondo verde. Para el color green , el estilo calculado para esto es el color RGB de rgb(0, 128, 0) . Al usar .filter() puede devolver una nueva matriz de elementos que tienen un color de fondo calculado de este valor:
const elm = document.getElementsByClassName('elm'); const greenElms = [...elm].filter(function(s) { const bgColor = getComputedStyle(s).backgroundColor; return bgColor === "rgb(0, 128, 0)"; }); console.log(greenElms); .elm { width: 200px; height: 100px; } .elm1 { background-color: red; } .elm2 { background-color: green; } .elm3 { background-color: blue; } <div class="elm elm1"></div> <div class="elm elm2"></div> <div class="elm elm3"></div> Sin embargo, la mayoría de las veces, su CSS es estático, por lo que sabrá al momento de escribir su código JS cuáles son los estilos/selectores que son responsables de diseñar sus elementos, y en su lugar puede usar .querySelectorAll() para hacer coincidir los mismos elementos a los que se aplica el estilo de fondo verde, por ejemplo:
const greenElms = document.querySelectorAll('.elm2'); // NodeList (similar to an array) console.log(greenElms); .elm { width: 200px; height: 100px; } .elm1 { background-color: red; } .elm2 { background-color: green; } .elm3 { background-color: blue; } <div class="elm elm1"></div> <div class="elm elm2"></div> <div class="elm elm3"></div>