Узнать высоту элемента через Javascript, если она прописана в стилевом файле
Как я могу получить атрибут height элемента через Javascript, если он прописан в стилевом файле style.css ? style.css:
.menu_bottom
Нужно, чтобы сообщение alert(. ) показало высоту данного элемента (просто число, без единицы измерения).
Отслеживать
задан 6 окт 2015 в 14:46
2,510 5 5 золотых знаков 31 31 серебряный знак 61 61 бронзовый знак
ассоциация: stackoverflow.com/q/15615552/5812238
7 окт 2017 в 18:51
4 ответа 4
Сортировка: Сброс на вариант по умолчанию
проще всего использовать jQuery :
$('#menu_bottom').height(); без jQuery можно использовать:
var h = document.getElementById('menu_bottom').clientHeight; var h = document.getElementById('menu_bottom').offsetHeight; var h = document.getElementById('menu_bottom').scrollHeight; clientHeight высота содержимого вместе с полями padding, но без полосы прокрутки.
offsetHeight «внешняя» высота блока, включая рамки.
scrollHeight полная внутренняя высота, включая прокрученную область.
JavaScript: 4 способа получить width и height элемента
Как получить ширину и высоту HTML элемента с помощью обычного (чистого) JavaScript. Vanilla JavaScript (нативный JavaScript) уже давно позволяет кроссбраузерно получить размеры HTML элемента, без использования сторонних библиотек вроде jQuery. Не все пользуются этой возможностью, возможно потому что у блока есть несколько размеров (с отступами и без них) и не всегда понятно как и какой получить и где и какой использовать. Давайте разберемся, как получить ширину и высоту элемента используя встроенные в браузер JS методы и чем они друг от друга отличаются.
Оглавление:
- CSS Box Model
- box-sizing
- Как получить ширину и высоту элемента в JS?
- offsetHeight и offsetWidth
- clientHeight и clientWidth
- Метод getBoundingClientRect()
- Метод window.getComputedStyle()
CSS Box Model
Что такое Box Model и как она влияет на размеры элемента (ширину и высоту).
Элемент HTML можно представить как коробку (box), которая состоит из четырех областей (частей):
- margin — внешний отступ — пустое пространство вокруг элемента.
- border — рамка — вокруг контента.
- padding — внутренний отступ — пустая пространство, вокруг контента.
- content — текст и другие элементы.
box-sizing
Какая именно будет высота и ширина зависит от CSS свойства box-sizing :
- box-sizing: content-box — размер коробки измеряется относительно контента.
Т.е. говорит браузеру, что размеры указанные в width и height относятся только к контенту. А padding и border не входят в указанные width и height и добавляются дополнительно, делая размер всего элемента больше, чем указано в width и height.
- box-sizing: border-box — размер коробки измеряется относительно border (рамки).
Т.е. говорит браузеру, что в указанные размеры для width и height входит все: content, padding и border.
По умолчанию в браузерах используется box-sizing: content-box .
Как получить ширину и высоту элемента в JS?
Здесь есть как минимум четыре варианта. Каждый из них имеет свои особенности и подойдет в зависимости от того, какой именно размер вам нужен. Рассмотрим каждый.
offsetHeight и offsetWidth
Содержат высоту и ширину элемента, включая padding и border (отступы и границы). Возвращаемое значение является целым числом и доступно только для чтения.
const element = document.querySelector( '.element' ); // int значение ширины: content + padding + border. element.offsetWidth; // 110 // int значение высоты: content + padding + border. element.offsetHeight; // 60
Значения округляются до целого числа (не float).
clientHeight и clientWidth
Содержат высоту и ширину элемента, включая padding (отступы), но исключая border (границы). Возвращаемое значение является целым числом и доступно только для чтения.
const element = document.querySelector( '.element' ); // int значение ширины: content + padding (без border). element.clientWidth; // 100 // int значение высоты: content + padding (без border). element.clientHeight; // 50
Значения округляются до целого числа (не float).
Метод getBoundingClientRect()
Метод getBoundingClientRect() возвращает объект, содержащий все размеры элемента и размеры его положения относительно области просмотра (viewport).
ВАЖНО: width и height метода getBoundingClientRect() вернут значение, основанное на свойстве CSS box-sizing элемента. Например, при box-sizing: border-box ширина и высота будут включать padding и border.
const element = document.querySelector( '.element' ); const rect = element.getBoundingClientRect() rect.width // 945.59 rect.height // 48.62 rect.right // 1162.79 rect.bottom // 132.44 rect.top // 83.82 rect.y // 83.82 rect.left // 217.19 rect.x // 217.19
JavaScript: 4 способа получить width и height элемента
Как получить ширину и высоту HTML элемента с помощью обычного (чистого) JavaScript. Vanilla JavaScript (нативный JavaScript) уже давно позволяет кроссбраузерно получить размеры HTML элемента, без использования сторонних библиотек вроде jQuery. Не все пользуются этой возможностью, возможно потому что у блока есть несколько размеров (с отступами и без них) и не всегда понятно как и какой получить и где и какой использовать. Давайте разберемся, как получить ширину и высоту элемента используя встроенные в браузер JS методы и чем они друг от друга отличаются.
Оглавление:
- CSS Box Model
- box-sizing
- Как получить ширину и высоту элемента в JS?
- offsetHeight и offsetWidth
- clientHeight и clientWidth
- Метод getBoundingClientRect()
- Метод window.getComputedStyle()
CSS Box Model
Что такое Box Model и как она влияет на размеры элемента (ширину и высоту).
Элемент HTML можно представить как коробку (box), которая состоит из четырех областей (частей):
- margin — внешний отступ — пустое пространство вокруг элемента.
- border — рамка — вокруг контента.
- padding — внутренний отступ — пустая пространство, вокруг контента.
- content — текст и другие элементы.
box-sizing
Какая именно будет высота и ширина зависит от CSS свойства box-sizing :
- box-sizing: content-box — размер коробки измеряется относительно контента.
Т.е. говорит браузеру, что размеры указанные в width и height относятся только к контенту. А padding и border не входят в указанные width и height и добавляются дополнительно, делая размер всего элемента больше, чем указано в width и height. - box-sizing: border-box — размер коробки измеряется относительно border (рамки).
Т.е. говорит браузеру, что в указанные размеры для width и height входит все: content, padding и border.
По умолчанию в браузерах используется box-sizing: content-box .
Как получить ширину и высоту элемента в JS?
Здесь есть как минимум четыре варианта. Каждый из них имеет свои особенности и подойдет в зависимости от того, какой именно размер вам нужен. Рассмотрим каждый.
offsetHeight и offsetWidth
Содержат высоту и ширину элемента, включая padding и border (отступы и границы). Возвращаемое значение является целым числом и доступно только для чтения.
const element = document.querySelector( '.element' ); // int значение ширины: content + padding + border. element.offsetWidth; // 110 // int значение высоты: content + padding + border. element.offsetHeight; // 60
Значения округляются до целого числа (не float).
clientHeight и clientWidth
Содержат высоту и ширину элемента, включая padding (отступы), но исключая border (границы). Возвращаемое значение является целым числом и доступно только для чтения.
const element = document.querySelector( '.element' ); // int значение ширины: content + padding (без border). element.clientWidth; // 100 // int значение высоты: content + padding (без border). element.clientHeight; // 50
Значения округляются до целого числа (не float).
Метод getBoundingClientRect()
Метод getBoundingClientRect() возвращает объект, содержащий все размеры элемента и размеры его положения относительно области просмотра (viewport).
ВАЖНО: width и height метода getBoundingClientRect() вернут значение, основанное на свойстве CSS box-sizing элемента. Например, при box-sizing: border-box ширина и высота будут включать padding и border.
const element = document.querySelector( '.element' ); const rect = element.getBoundingClientRect() rect.width // 945.59 rect.height // 48.62 rect.right // 1162.79 rect.bottom // 132.44 rect.top // 83.82 rect.y // 83.82 rect.left // 217.19 rect.x // 217.19
Как получить высоту с помощью JavaScript?
Метод 1. Использование свойства offsetHeight: свойство offsetHeight элемента доступно только для чтения и используется для возврата высоты элемента в пикселях. Он включает в себя любые границы или отступы элемента. Это свойство можно использовать для определения высоты элемента .
Синтаксис:
divElement.offsetHeight
Пример:
How to get the div height
using JavaScript ?
height: 100px;
width: 100px;
background-color: green;
display:inline-block;
GeeksforGeeks
Get the height of < div >
element using JavaScript
Click on the button to get the height
of < div >element
Height of the div:
Get Height
function getHeight() <
divElement = document.querySelector(".box");
elemHeight = divElement.offsetHeight;
document.querySelector(".output").textContent
= elemHeight + "px";
Выход:
- Перед нажатием кнопки:
- После нажатия кнопки:
Метод 2: Использование свойства clientHeight. Свойство clientHeight элемента доступно только для чтения и используется для возврата высоты элемента в пикселях. Он включает только заполнение, примененное к элементу, и исключает границы, поля и горизонтальные полосы прокрутки. Это свойство можно использовать для определения высоты элемента div. Синтаксис:
divElement.clientHeight
Пример:
How to get the div height
using JavaScript ?
height: 100px;
width: 100px;
background-color: green;
display:inline-block;
GeeksforGeeks
Get the height of < div >
element using JavaScript
Click on the button to get the height
of < div >element
Height of the div:
Get Height
function getHeight() <
divElement = document.querySelector(".box");
elemHeight = divElement.clientHeight;
document.querySelector(".output").textContent
= elemHeight + "px";
Выход:
- Перед нажатием кнопки:
- После нажатия кнопки:
Метод 3. Использование метода getBoundingClientRect (). Метод getBoundingClientRect () используется для возврата объекта DOMRect, который содержит 8 свойств, связанных с размерами ограничивающего прямоугольника.
Одним из этих свойств объекта DOMRect является свойство height. Возвращает высоту объекта DOMRect. Это свойство можно использовать для определения высоты элемента div. Синтаксис:
elemRect = divElement.getBoundingClientRect (); elemHeight = elemRect.height;
Пример:
How to get the div height
using JavaScript ?
height: 100px;
width: 100px;
background-color: green;
display:inline-block;
GeeksforGeeks
Get the height of < div >
element using JavaScript
Click on the button to get the height
of < div >element
Height of the div:
Get Height
function getHeight() <
divElement = document.querySelector(".box");
elemRect = divElement.getBoundingClientRect();
elemHeight = elemRect.height;
document.querySelector(".output").textContent
= elemHeight + "px";
Выход:
- Перед нажатием кнопки:
- После нажатия кнопки:
