mi problema es que quiero el ancho exacto (dinámicamente) de mi elemento de grupo de diapositivas. lo intento de muchas maneras, pero cada vez que tengo 0px.
const slideGroupWidth = document.querySelector('.slide-group'); console.log(getComputedStyle(slideGroupWidth).width); body { display: flex; align-items: center; justify-content: start; height: 100vh; } .slider { display: flex; position: relative; width: 1100px; margin-inline: auto; overflow: hidden; border: 1px solid red; } .btn { background-color: #dcdcdc; border-radius: 50%; border: none; align-self: start; padding: .3rem; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; position: absolute; } .left-btn { top: 50%; left: 1%; transform: translate(30%, -50%); } .right-btn { top: 50%; right: 1%; transform: translate(-30%, -50%); } .slide { transition: all .5s ease; } .slide-group { display: flex; transition: all .5s ease; } .slide-img { display: block; } <div class="slider"> <div class="slide-group"> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1084" alt="image" /> </div> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1004" alt="image" /> </div> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1044" alt="image" /> </div> </div> <div class="slide-group"> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1084" alt="image" /> </div> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1004" alt="image" /> </div> </div> <button class="btn right-btn">➡</button> <button class="btn left-btn">⬅</button> </div>otra forma en que obtuve 0px:
let box = document.querySelector('.slide-group'); let width = box.offsetWidth; console.log(width); ¿Por qué quiero ancho? Quiero establecer el ancho del elemento .slide dinámicamente desde .slide-group container .
nota: inspeccionar este elemento dame 1050px de ancho en cromo.
El problema es que no está esperando que se cargue una imagen antes de preguntarle al sistema cuál es su ancho.
Este fragmento incluye una función de carga bastante básica para demostrarlo.
function allloaded() { const slideGroupWidth = document.querySelector('.slide-group'); console.log(getComputedStyle(slideGroupWidth).width); } window.onload = allloaded; body { display: flex; align-items: center; justify-content: start; height: 100vh; } .slider { display: flex; position: relative; width: 1100px; margin-inline: auto; overflow: hidden; border: 1px solid red; } .btn { background-color: #dcdcdc; border-radius: 50%; border: none; align-self: start; padding: .3rem; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; position: absolute; } .left-btn { top: 50%; left: 1%; transform: translate(30%, -50%); } .right-btn { top: 50%; right: 1%; transform: translate(-30%, -50%); } .slide { transition: all .5s ease; } .slide-group { display: flex; transition: all .5s ease; } .slide-img { display: block; } <div class="slider"> <div class="slide-group"> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1084" alt="image" /> </div> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1004" alt="image" /> </div> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1044" alt="image" /> </div> </div> <div class="slide-group"> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1084" alt="image" /> </div> <div class="slide"> <img class="slide-img" src="https://picsum.photos/350/200?image=1004" alt="image" /> </div> </div> <button class="btn right-btn">➡</button> <button class="btn left-btn">⬅</button> </div>Probar:
Mantener una identificación para el grupo de slidegroup como:
<div class="slide-group" id="slide-group">codigo js:
console.log(document.getElementById("slide-group").offsetWidth)Esto imprimirá el ancho exacto de div