Как узнать ширину и высоту объекта (div) Javascript?

Question

Хочу вывести в консоль данные о блоке, то есть его ширину и высоту. В CSS уже всё задано, просто хочу вывести то, что уже написано. P.S: В консоле выводится "Высота: undefined" и "Ширина: undefined"

HTML:

<body>
    <div class="wrapper">
        <div class="block">
            <div class="text">1</div>
        </div>

    </div>
    <script src="script.js"></script>
</body>

CSS:

.block{
  background-color: orange;
  width: 250px;
  height: 100px;
  border:1px solid black;
  margin: 5px;

  /* Центрируем */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

JavaScript(не работает):

var offsetHeight = document.getElementsByClassName('block').offsetHeight;
console.log('Высота:', offsetHeight);
var offsetWidth = document.getElementsByClassName('block').clientWidth;
console.log('Ширина:', offsetWidth);

Answer 1

document.getElementsByClassName() возвращает не элемент, а коллекцию элементов с соответствующим классом. В названии метода обратите внимание на Elements. Это значит много элементов, а не один Element.

Решения 3:

Обращаться по индексу [0].
Использовать id вместо класса и getElementById, тогда вы получите сразу элемент.
Использовать querySelector.

var offsetHeight = document.getElementsByClassName('block')[0].offsetHeight;
console.log('Высота:', offsetHeight);
var offsetWidth = document.getElementsByClassName('block')[0].clientWidth;
console.log('Ширина:', offsetWidth);

.block {
  background-color: orange;
  width: 250px;
  height: 100px;
  border: 1px solid black;
  margin: 5px;
  /* Центрируем */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<body>
  <div class="wrapper">
    <div class="block">
      <div class="text">1</div>
    </div>

  </div>
  <script src="script.js"></script>
</body>

Answer 2

Отталкиваясь от предыдущего ответа заметил что ширина считается без учета обводки (border), если нужно получить реальную длину и высоту элемента воспользуйтесь функцией <Element>.getBoundingClientRect.

const block_element = document.querySelector('.block');
const { width, height } = block_element.getBoundingClientRect();

console.log('Ширина: ', width); // 252
console.log('Высота: ', height); // 102

.block {
  background-color: orange;
  width: 250px;
  height: 100px;
  border: 1px solid black;
  margin: 5px;
  /* Центрируем */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

<div class="wrapper">
  <div class="block">
    <div class="text">1</div>
  </div>
</div>

БЛОГ НА HUSL

Как узнать ширину и высоту объекта (div) Javascript?

Ответы (2 шт):