No estoy seguro de por qué este me persigue. Tengo una cuadrícula de tarjetas de eventos. Cada tarjeta tiene un botón con el mismo color de fondo. ¿Cómo devuelvo el valor rbg de esa clase de botón, en este ejemplo event-button ?
<div class="event-grid"> <div class="event-card"> <button class="event-button">Buy Tickets</button> // return r, g & b values for bg color </div> <div class="event-card"> <button class="event-button">Buy Tickets</button> </div> <div class="event-card"> <button class="event-button">Buy Tickets</button> </div> <div class="event-card"> <button class="event-button">Buy Tickets</button> </div> </div>Si desea obtener el valor r , g , b y a valor de la definición de la clase css, puede usar la referencia getComputedStyle
Por favor, encuentre el violín de trabajo.
document.querySelectorAll('button.event-button').forEach((button) => { button.onclick = function(e) { const styles = window.getComputedStyle(e.target); const background = styles.getPropertyValue("background-color"); const [red, green, blue, alpha] = background.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(','); console.log(red, green, blue); } }); .event-button { background: rgba(255,0,0,0.3); } <div class="event-grid"> <div class="event-card"> <button class="event-button">Buy Tickets</button> // return r, g & b values for bg color </div> <div class="event-card"> <button class="event-button">Buy Tickets</button> </div> <div class="event-card"> <button class="event-button">Buy Tickets</button> </div> <div class="event-card"> <button class="event-button">Buy Tickets</button> </div> </div>