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 you have read our privacy policy.

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