Quiero hacer que un elemento html que no sea lienzo cambie de color en un patrón basado en su color actual usando javascript
en el ejemplo, boxyBox tiene un color de fondo de rgba (100, 100, 100, 0.9), y quiero cambiar el color de fondo de cualquier elemento con un valor alfa de menos de 1
var box = document.getElementById("boxyBox"); var styleOfBox = window.getComputedStyle(box); var colorOfBox = styleOfBox.getPropertyValue("background-color"); console.log(colorOfBox); //returns rgba(100, 100, 100, 0.9); console.log(typeof colorOfBox); //returns string var alphaOfBox = ???; if(alphaOfBox < 1) { box.style.color = red; }¿Hay alguna manera de extraer valores de colores primarios individuales o analizarlos de la cadena de colores de fondo?
Después de unas horas más de buscar a tientas, encontré esta solución
var box = document.getElementById("boxyBox"); var styleOfBox = window.getComputedStyle(box); var colorArr = styleOfBox.getPropertyValue("background-color").split(", "); var red = parseFloat(colorArr[0].match(/[\d\.]+/)[0]); var green = parseFloat(colorArr[1]); var blue; var alpha; if(typeof colorArr[3] == "string") { alpha = parseFloat(colorArr[3].match(/[\d\.]+/)[0]); blue = parseFloat(colorArr[2]); else { blue = parseFloat(colorArr[2].match(/[\d\.]+/)[0]); alpha = 1; }estas variables ahora corresponden al color principal de la computadora que les da nombre, incluidos los valores decimales y no rgba en la hoja de estilo