Предположим, что у меня есть <div>, который я хочу сосредоточить на дисплее браузера (в окне просмотра). Для этого мне нужно рассчитать ширину и высоту элемента <div>.Как получить фактическую ширину и высоту элемента HTML?
Что следует использовать? Пожалуйста, включите информацию о совместимости браузера.
Вы должны использовать .offsetWidth и .offsetHeight свойства. Обратите внимание, что они принадлежат элементу, а не .style.
var width = document.getElementById('foo').offsetWidth;
Остерегайтесь! offsetHeight/offsetWidth может возвращать 0, если вы недавно внесли некоторые изменения DOM в элемент. Возможно, вам придется вызвать этот код в вызове setTimeout после изменения элемента. –
Документация о '.offsetWidth' и' .offsetHeight': https://developer.mozilla.org/en/Determining_the_dimensions_of_elements –
При каких обстоятельствах он возвращает 0? – Cheetah
ПРИМЕЧАНИЕ: Этот ответ был написан в 2008 году. В то время лучшим решением для большинства пользователей было использование jQuery. Я оставляю ответ здесь для потомков, и, если вы используете jQuery, это хороший способ сделать это. Если вы используете какой-либо другой фреймворк или чистый JavaScript, то принятый ответ, вероятно, является способом выхода.
По JQuery 1.2.6 вы можете использовать один из ядра CSS functions, height и width (или outerHeight и outerWidth, в зависимости от обстоятельств).
var height = $("#myDiv").height();
var width = $("#myDiv").width();
var docHeight = $(document).height();
var docWidth = $(document).width();
element.offsetWidth и element.offsetHeight должны делать, как это было предложено в предыдущем посте.
Однако, если вы просто хотите сосредоточить контент, есть лучший способ сделать это. Предполагая, что вы используете xhtml strict DOCTYPE. установите margin: 0, свойство auto и требуемую ширину в px для тега body. Содержимое выравнивается по центру со страницей.
Я думаю, что он хочет также центрировать его по вертикали, что является правильной болью с CSS, если вы не можете выполнить некоторые конкретные критерии (например, контент с известным размером) – Greg
Вам нужно только рассчитать его для IE7 и старше (и только если ваш контент не имеет фиксированного размера). Я предлагаю использовать условные комментарии HTML для ограничения взлома старых IE, которые не поддерживают CSS2. Для всех других браузеров используйте это:
<style type="text/css">
html,body {display:table; height:100%;width:100%;margin:0;padding:0;}
body {display:table-cell; vertical-align:middle;}
div {display:table; margin:0 auto; background:red;}
</style>
<body><div>test<br>test</div></body>
Это идеальное решение. Он центрирует <div> любого размера и сжимает его до размера его содержимого.
также вы можете использовать этот код:
var divID = document.getElementById("divid");
var h = divID.style.pixelHeight;
Хм, работает в Chrome и IE9, похоже, не работает в Firefox. Он работает только для определенных типов документов? – BrainSlugs83
... кажется CSS помощь поставить DIV по центру ...
<style>
.monitor {
position:fixed;/* ... absolute possible if on :root */
top:0;bottom:0;right:0;left:0;
visibility:hidden;
}
.wrapper {
width:200px;/* this is size range */
height:100px;
position:absolute;
left:50%;top:50%;
visibility:hidden;
}
.content {
position:absolute;
width: 100%;height:100%;
left:-50%;top:-50%;
visibility:visible;
}
</style>
<div class="monitor">
<div class="wrapper">
<div class="content">
... so you hav div 200px*100px on center ...
</div>
</div>
</div>
Если offsetWidth возвращает 0, вы можете получить ширину стиля элемента и найдите его для номера. "100px" -> 100
/\d*/.exec(MyElement.style.width)
Посмотрите на Element.getBoundingClientRect().
Этот метод возвращает объект, содержащий width, height, а также некоторые другие полезные значения:
{
width: 960,
height: 71,
top: 603,
bottom: 674,
left: 360,
right: 1320
}
Для примера:
var element = document.getElementById('foo');
var positionInfo = element.getBoundingClientRect();
var height = positionInfo.height;
var width = positionInfo.width;
Я считаю, что это не те вопросы, которые .offsetWidth и .offsetHeight, где они иногда возвращаются 0 (как обсуждалось в comments here)
Другое отличие: getBoundingClientRect() может возвращать дробные пиксели, где .offsetWidth и .offsetHeight будут округлены до ближайшего целого числа.
IE8 Примечание:. getBoundingClientRect не возвращает ширину и высоту на IE8 и ниже *
Если вы сусло поддержка IE8, используйте .offsetWidth и .offsetHeight:
var height = element.offsetHeight;
var width = element.offsetWidth;
Ссылка:
.offsetHeight: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight.offsetWidth: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetWidth.getBoundingClientRect(): https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRectgetboundingClientRect() вернет фактическую ширину и высоту элементов, масштабированных с помощью css, тогда как 'offsetHeight' и' offsetWidth' не будут. – LukeP
Только в случае, если это полезно для всех, я ставлю текстовое поле, кнопка и Див все с той же CSS :
width:200px;
height:20px;
border:solid 1px #000;
padding:2px;
<input id="t" type="text" />
<input id="b" type="button" />
<div id="d"></div>
Я пробовал его в chrome, firefox и ie-edge, я пытался с jquery и без, и я пробовал его с box-sizing:border-box. Всегда с <!DOCTYPE html>
Результаты:
Firefox Chrome IE-Edge
with w/o with w/o with w/o box-sizing
$("#t").width() 194 200 194 200 194 200
$("#b").width() 194 194 194 194 194 194
$("#d").width() 194 200 194 200 194 200
$("#t").outerWidth() 200 206 200 206 200 206
$("#b").outerWidth() 200 200 200 200 200 200
$("#d").outerWidth() 200 206 200 206 200 206
$("#t").innerWidth() 198 204 198 204 198 204
$("#b").innerWidth() 198 198 198 198 198 198
$("#d").innerWidth() 198 204 198 204 198 204
$("#t").css('width') 200px 200px 200px 200px 200px 200px
$("#b").css('width') 200px 200px 200px 200px 200px 200px
$("#d").css('width') 200px 200px 200px 200px 200px 200px
$("#t").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#b").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#d").css('border-left-width') 1px 1px 1px 1px 1px 1px
$("#t").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#b").css('padding-left') 2px 2px 2px 2px 2px 2px
$("#d").css('padding-left') 2px 2px 2px 2px 2px 2px
document.getElementById("t").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("b").getBoundingClientRect().width 200 200 200 200 200 200
document.getElementById("d").getBoundingClientRect().width 200 206 200 206 200 206
document.getElementById("t").offsetWidth 200 206 200 206 200 206
document.getElementById("b").offsetWidth 200 200 200 200 200 200
document.getElementById("d").offsetWidth 200 206 200 206 200 206
Просто, чтобы быть ясным ... какой-либо из этих браузеров делает что-то по-другому друг от друга? Я не могу найти никаких различий ... Кроме того, я не участвую в голосовании (пока), но это не * действительно * прямо ответит на вопрос, хотя это может быть легко отредактировано для этого. –
Не был нацелен на ответ на вопрос - его уже ответили. Просто какая-то полезная информация, и да, все основные браузеры последней версии соглашаются на эти ценности - это хорошо. – Graham
Ну ... если ваше намерение - не * ответить на вопрос, тогда это действительно не принадлежит здесь (как «ответ»). Я бы подумал о том, чтобы поместить это в какой-то внешний ресурс (возможно, GitHub gist или сообщение в блоге) и связать его в комментарии к исходному Вопросу или одному из ответов. –
В соответствии с MDN: Determining the dimensions of elements
offsetWidth и offsetHeight возвращают «общий объем пространства элемент занимает, в том числе и ширины видимого содержимого, полосы прокрутки (если таковые имеются), прокладка и граница "
и clientHeight вернуть" сколько места занимает фактическое отображаемое содержимое, вкл. ЛУДИНГ отступов, но не включая границы, поля, или скроллинга»
scrollWidth и scrollHeight возвращают„фактический размер содержания, независимо от того, сколько он в настоящее время видно, что вам нужно использовать“
Так это зависит от того, будет ли измеренный контент отклоняться от текущей видимой области.
Помните, что получение высоты элемента через ** любой метод ** всегда имеет ** влияние на производительность **, поскольку оно заставляет браузер пересчитывать положение всех элементов на странице (reflow). Поэтому избегайте слишком многого. Оформить заказ [этот список] (https://gist.github.com/paulirish/5d52fb081b3570c81e3a), для чего происходит переключение. –