為什么我在 js 中得到錯誤的元素寬度？

Question

我的問題是我想要幻燈片組元素的確切寬度（動態）。 我嘗試了很多方法，但每次我得到 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>

我得到0px的另一種方式：

let box = document.querySelector('.slide-group');
let width = box.offsetWidth;
console.log(width);

為什么我想要寬度？ 我想從.slide-group container動態設置 .slide 元素的寬度。

注意：檢查這個元素給我 1050px 的 chrome 寬度。

Answer 1

問題是在詢問系統寬度是多少之前，您沒有等待加載圖像。

這段代碼放入了一個相當基本的 onload 函數來演示。

 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>

Answer 2

嘗試：

為slidegroup保留一個 ID，例如：

<div class="slide-group" id="slide-group">

js代碼：

console.log(document.getElementById("slide-group").offsetWidth)

這將打印 div 的確切寬度