Почему я получаю неправильную ширину элемента в js?

моя проблема в том, что мне нужна точная ширина (динамически) моего элемента слайд-группы. я пробую много способов, но каждый раз получаю 0px.

const slideGroupWidth = document.querySelector('.slide-group');
console.info(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.info(width);

Зачем мне ширина? я хочу установить ширину элемента .slide динамически из .slide-group container.

примечание: проверка этого элемента дает мне ширину 1050 пикселей в хроме.

Я предполагаю, что это связано со временем загрузки изображения, но я не уверен. Я думаю, это причина, потому что кажется, что если вы ждете с setTimeout(() => { [...] },1000), результат будет 1050. Это просто подсказка для следующих ответов, не используйте setTimeOut для этого

— 12.05.2022 09:43

Я получаю 1050 пикселей из вашего кода. Куда вы поместили свой тег <script>? Переместите его в тег заголовка вашего html и добавьте к нему отсрочку. вот так: <script defer src = "./main.js"></script>

— 12.05.2022 09:56

@ Седрик, да, проблема решена. но что за кулисами проблемы? это только для того, что я загрузил изображение из picsum api?

— 12.05.2022 10:33

Все еще предположение, но загрузка изображения до запуска скрипта может занять слишком много времени, поэтому ваши div не имеют ширины.

— 12.05.2022 10:38

javascript css

12.05.2022 08:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пытаться:

Сохранение идентификатора для slidegroup, например:

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

js-код:

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

Это напечатает точную ширину div

нет, я получил 0 из этого кода

— 12.05.2022 09:13

12.05.2022 09:08

Ответ принят как подходящий

Проблема в том, что вы не ждете загрузки изображения, прежде чем запрашивать у системы его ширину.

Этот фрагмент демонстрирует довольно простую функцию загрузки.

function allloaded() {
  const slideGroupWidth = document.querySelector('.slide-group');
  console.info(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>

каждый раз, когда я должен использовать этот фрагмент для этой проблемы?

— 12.05.2022 11:02

12.05.2022 10:41