0

lo que ocurre es que tengo una carta, que tienen un witdh dinámico dependiendo de la resolución, pero requiero que uno de los tamaños de esa carta lo tengan otras dos cartas, estoy con vanilla JS

document.addEventListener("DOMContentLoaded", () => {
let cardGuide = document.getElementById("cardGuide"),
    widthCardGuide = cardGuide.getBoundingClientRect().width,
    cardsPlayerActive =
        document.getElementsByClassName("cardsPlayerActive");
    for (const card of cardsPlayerActive) {
        card.style.width = `${Math.round(widthCardGuide)}`;
        console.log(card);
    }

});

Ese es mi codigo, donde cardGuide es la carta de la que me quiero copiar, luego obtengo el style del getBoundingClientRect y luego obtenfo por las clases las cartas que quiero cambiarle el width, pero la propiedad style.width no se aplica

1 respuesta 1

0

Lo pude solucionar de la siguiente forma:

document.addEventListener("DOMContentLoaded", () => {
let cardGuide = document.getElementById("cardGuide"),
    widthCardGuide = window.getComputedStyle(cardGuide),
    cardsPlayerActive =
        document.getElementsByClassName("cardsPlayerActive");
setTimeout(() => {
    console.log(widthCardGuide.width);
    for (const card of cardsPlayerActive) {
        card.style.width = `${widthCardGuide.width}`;
        console.log(card);
    }
}, 1);

});

Donde primero recibo el estilo computado del elemento, luego hago un setTimeout para hacer asyncronico, osea que espere asi sea una milesima de segundo que javascript ya tenga el estilo computado porque sino devuelve cero y luego realizo un forOf para todos los cards porque un for normal daria problemas

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.