2

Хочу вывести в консоль данные о блоке, то есть его ширину и высоту. В 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);
2
  • удалось разобраться?
    – aepot
    19 мая 2021 в 8:16
  • 1
    Да, спасибо большое!
    – MarkSakhar
    19 мая 2021 в 11:49

2 ответа 2

3

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>

0
0

Отталкиваясь от предыдущего ответа заметил что ширина считается без учета обводки (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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.