CODEWITHSUNDEEP
javascriptcss
ali pasha
ali pasha

Reputation: 168

why i get wrong element width in js?

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.

Upvotes: 0

Views: 126

Answers (2)

A Haworth
A Haworth

Reputation: 36426

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>

Upvotes: 1

Sarvin R
Sarvin R

Reputation: 96

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

Upvotes: 0

Related Questions