Как получить фактическую ширину и высоту HTML-элемента?
Предположим, у меня есть <div> , который я хочу центрировать на дисплее браузера (область просмотра). Для этого мне нужно вычислить ширину и высоту элемента <div> .
Что я должен использовать? Пожалуйста, включите информацию о совместимости браузера.
12 ответов
Вы должны использовать свойства .offsetWidth и .offsetHeight . Обратите внимание, что они принадлежат элементу, а не .style .
var width = document.getElementById(‘foo’).offsetWidth;
offsetWidth и offsetHeight возвращают «общий объем пространства, занимаемого элементом, включая ширину видимого содержимого, полосы прокрутки (если есть), отступы и границы»
clientWidth и clientHeight возвращают «сколько места занимает фактически отображаемое содержимое, включая отступы, но не включая границы, поля или полосы прокрутки»
scrollWidth и scrollHeight возвращают «фактический размер контента, независимо от того, какой его объем в настоящее время виден»
Таким образом, это зависит от того, ожидается ли, что измеренное содержимое выйдет за пределы текущей видимой области.
Также вы можете использовать этот код:
. кажется, CSS помогает поместить div в центр .
Если вам нужно центрировать его в порт дисплея браузера; Вы можете достичь этого только с помощью CSS
Вам нужно только рассчитать его для IE7 и старше (и только если ваш контент не имеет фиксированного размера). Я предлагаю использовать условные комментарии HTML, чтобы ограничить взлом старых IE, которые не поддерживают CSS2. Для всех других браузеров используйте это:
Это идеальное решение. Он центрирует <div> любого размера и сокращает его до размера его содержимого.
Element.offsetWidth и element.offsetHeight должны делать, как предложено в предыдущем посте.
Однако, если вы просто хотите центрировать контент, есть лучший способ сделать это. Предполагая, что вы используете xhtml строгий DOCTYPE. установите поле: 0, свойство auto и необходимую ширину в пикселях для тега body. Контент выравнивается по центру страницы.
Вот код для WKWebView , который определяет высоту определенного элемента Dom (не работает должным образом для всей страницы)
На всякий случай, если это кому-нибудь пригодится, я помещаю текстовое поле, кнопку и div с одним и тем же css:
Я пробовал это в chrome, firefox и ie-edge, я пробовал с jquery и без, и я пробовал с и без box-sizing:border-box . Всегда с <!DOCTYPE html>
ПРИМЕЧАНИЕ : этот ответ был написан в 2008 году. В то время лучшим кросс-браузерным решением для большинства людей было использование jQuery. Я оставляю здесь ответ для потомков, и, если вы используете jQuery, это хороший способ сделать это. Если вы используете какой-то другой фреймворк или чистый JavaScript, приемлемый ответ, вероятно, будет правильным решением.
Начиная с jQuery 1.2.6 вы можете использовать одну из основных CSS-функций, <
Если offsetWidth возвращает 0, вы можете получить свойство width элемента style и найти его по номеру. «100px» -> 100
Легко изменить стили элементов, но довольно сложно прочитать значение.
JavaScript не может прочитать никакое свойство стиля элемента (elem.style) из css (внутреннее / внешнее), если вы не используете вызов встроенного метода getComputedStyle в javascript.
Элемент: элемент, для которого нужно прочитать значение.
псевдо: псевдоэлемент, если требуется, например, :: before. Пустая строка или отсутствие аргумента означает сам элемент.
В результате получается объект со свойствами стиля, например, elem.style, но теперь по отношению ко всем классам CSS.
Например, здесь стиль не видит границы:
Поэтому изменил ваш код javaScript, добавив в него getComputedStyle элемента, для которого вы хотите получить его ширину / высоту или другой атрибут
Расчетные и разрешенные значения
В CSS есть две концепции:
Вычисленное значение стиля — это значение после применения всех правил CSS и наследования CSS в результате каскада CSS. Это может выглядеть как высота: 1em или размер шрифта: 125%.
Разрешенное значение стиля — это то, которое окончательно применяется к элементу. Значения, такие как 1em или 125%, являются относительными. Браузер принимает вычисленное значение и делает все единицы фиксированными и абсолютными, например: height: 20px или font-size: 16px. Для свойств геометрии разрешенные значения могут иметь плавающую точку, например, ширину: 50,5 пикселей.
Давным-давно был создан метод getComputedStyle для получения вычисляемых значений, но оказалось, что разрешенные значения гораздо удобнее, и стандарт изменился.
Поэтому в настоящее время getComputedStyle фактически возвращает разрешенное значение свойства.
Обратите внимание:
getComputedStyle требует полного имени свойства
Вы всегда должны запрашивать точное свойство, которое вы хотите, например paddingLeft или высоту или ширину. В противном случае правильный результат не гарантируется.
Например, если есть свойства paddingLeft / paddingTop, то что мы должны получить для getComputedStyle (elem) .padding? Ничего, или, может быть, «сгенерированное» значение из известных отступов? Здесь нет стандартного правила.
Есть и другие несоответствия. Например, некоторые браузеры (Chrome) показывают 10px в приведенном ниже документе, а некоторые из них (Firefox) — нет:
Размеры и скроллинг элементов в JavaScript
Также стоит отметить, что когда в элементе отображается полоса прокрутки некоторые браузеры могут для её отображения отбирать соответствующее место у контента.
Рассмотрим следующий пример:
Свойства для получения размеров и прокрутки элемента:
- offsetLeft и offsetTop – смещение левого верхнего угла элемента (в пикселях) относительно offsetParent ;
- offsetWidth и offsetHeight – видимая ширина и высота элемента (в пикселях), включая его отступы и границы;
- clientLeft и clientTop – ширина левой и верхней границы элемента (если у элемента имеется полоса прокрутки и текст с ориентацией справа налево, то clientLeft включает в себя ещё ширину вертикальной полосы прокрутки, если она конечно занимает место);
- clientWidth и clientHeight – видимая ширина и высота элемента, включающая отступы (без полос прокрутки и границ);
- scrollWidth и scrollHeight – полная высота и ширина элемента, включая содержимое которое не отображается на экране из-за переполнения;
- scrollLeft и scrollTop – количество пикселей, на которое прокручено содержимое элемента по горизонтали и вертикали.
Эти свойства, кроме scrollLeft и scrollTop , доступны для чтения. Т.е. они позволяют только получить различные метрики, но не установить их.
Для задания элементу ширины и высоты следует использовать стили:
Свойства offsetLeft и offsetTop вычисляют значения относительно offsetParent .
offsetParent
elem.offsetParent – свойство, возвращающее элемент, который является ближайшим предком (по иерархии) для elem .
При этом предком может быть только:
- • позиционированный элемент, т.е. такой, который имеет position отличное от static , т.е. relative , absolute , fixed или sticky ;
- <td> , <th> или <table> ;
- <body> .
offsetParent возвращает null в следующих ситуациях:
- для <body> ;
- элемент не отображается (он или его предок имеет display:none ) или его нет в документе (он создан, но не вставлен);
- элемент имеет фиксированное позиционирование position:fixed ;
Задачи
1. Устранить сдвиг при открытии модального окна
При открытии модального окна мы добавляем к body свойство overflow:hidden .
При этом, если у нас отображается вертикальная полоса прокрутки, которая занимает место, то при обрезании контента происходит смещение контента.
.width()
Description: Get the current computed width for the first element in the set of matched elements.
version added: 1.0 .width()
The difference between .css( "width" ) and .width() is that the latter returns a unit-less pixel value (for example, 400 ) while the former returns a value with units intact (for example, 400px ). The .width() method is recommended when an element's width needs to be used in a mathematical calculation.
Figure 1 — Illustration of the measured width
This method is also able to find the width of the window and document.
Note that .width() will always return the content width, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS width plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box . To avoid this penalty, use .css( "width" ) rather than .width() .
Note: Although style and script tags will report a value for .width() or height() when absolutely positioned and given display:block , it is strongly discouraged to call those methods on these tags. In addition to being a bad practice, the results may also prove unreliable.
Additional Notes:
- The number returned by dimensions-related APIs, including .width() , may be fractional in some cases. Code should not assume it is an integer. Also, dimensions may be incorrect when the page is zoomed by the user; browsers do not expose an API to detect this condition.
- The value reported by .width() is not guaranteed to be accurate when the element or its parent is hidden. To get an accurate value, ensure the element is visible before using .width() . jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
Example:
Show various widths. Note the values are from the iframe so might be smaller than you expected. The yellow highlight shows the iframe body.