why i get wrong element width in js?

Question

my issue is that i want exact width (dynamicly) of my slide-group element. i try many way but each time i got 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>

another way that i got 0px:

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

Why i want width? i want set width of .slide element dynamicly from .slide-group container.

note: inspect of this element give me 1050px width in chrome.

I'm guessing it's due to image loading time but I'm not sure. I think this is the reason because it seems that if you wait with a setTimeout(() => { [...] },1000), the output is 1050. It's just a hint for next answers, don't use setTimeOut for this — Cédric
– Cédric, Commented May 12, 2022 at 7:43
I'm getting 1050px from your code. Where have you put your <script> tag? Move it to your html's header tag and add defer to it. like this: <script defer src="./main.js"></script> — Parsa Arvaneh
– Parsa Arvaneh, Commented May 12, 2022 at 7:56
@Cédric yes, the problem is solved. but what is the behinde the sence of problem? is it for just i loaded image from picsum api? — ali pasha
– ali pasha, Commented May 12, 2022 at 8:33
Still a guess but it may takes too much time to load the image before the script runs, so your divs don't have any width. — Cédric
– Cédric, Commented May 12, 2022 at 8:38

A Haworth · Accepted Answer · 2022-05-12 08:41:54Z

The problem is that you aren't waiting for an image to be loaded before you are asking the system what its width is.

This snippet puts in a rather basic onload function to demonstrate.

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>

Sarvin R · Accepted Answer · 2022-05-12 07:08:53Z

0

Try:

Keeping an id for slidegroup like:

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

js code:

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

This will print the exact width of div

answered May 12, 2022 at 7:08

Sarvin R

963 bronze badges

1 Comment

ali pasha Over a year ago

no i got 0 from this code

Collectives™ on Stack Overflow

why i get wrong element width in js?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related