Как получить фактическую ширину и высоту HTML-элемента?

653

Предположим, что у меня есть <div>, который я хочу центрировать в окне браузера (viewport). Для этого мне нужно рассчитать ширину и высоту элемента <div>.

Что я должен использовать? Пожалуйста, укажите информацию о совместимости браузера.

  • 5
    Имейте в виду, что получение высоты элемента с помощью любого метода всегда влияет на производительность, поскольку браузер пересчитывает положение всех элементов на странице (перекомпоновка). Поэтому избегайте делать это слишком много. Изучите этот список, чтобы узнать, какие вещи вызывают перекомпоновку.
Теги:
xhtml
dhtml

13 ответов

982
Лучший ответ

Вы должны использовать свойства .offsetWidth и .offsetHeight. Обратите внимание, что они принадлежат элементу, а не .style.

var width = document.getElementById('foo').offsetWidth;

Поделиться
  • 154
    Осторожно! offsetHeight / offsetWidth может вернуть 0, если вы недавно выполнили определенные модификации DOM для элемента. Возможно, вам придется вызывать этот код в вызове setTimeout после изменения элемента.
  • 34
    Документация о .offsetWidth и .offsetHeight : developer.mozilla.org/en/Determining_the_dimensions_of_elements
Показать ещё 9 комментариев
136

Взгляните на 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 (как обсуждалось в комментариях здесь)

Другое отличие состоит в том, что getBoundingClientRect() может возвращать дробные пиксели, где .offsetWidth и .offsetHeight будут округляться до ближайшего целого числа.

IE8 Примечание: getBoundingClientRect не возвращает высоту и ширину в IE8 и ниже. *

Если вы должны поддерживать IE8, используйте .offsetWidth и .offsetHeight:

var height = element.offsetHeight;
var width = element.offsetWidth;

Стоит отметить, что объект, возвращаемый этим методом, на самом деле не является нормальным объектом. Его свойства не перечисляются (например, Object.keys не работает "из коробки").

Подробнее об этом здесь: Как лучше всего преобразовать ClientRect/DomRect в простой объект

Ссылка:

Поделиться
  • 6
    getboundingClientRect () вернет фактическую ширину и высоту элементов, масштабированных с помощью css, тогда как offsetHeight и offsetWidth не будут.
59

ПРИМЕЧАНИЕ: этот ответ был написан в 2008 году. В то время лучшим решением для большинства браузеров было использование jQuery. Я оставляю ответ здесь для потомков, и, если вы используете jQuery, это хороший способ сделать это. Если вы используете какую-либо другую фреймворк или чистый JavaScript, то приемлемый ответ, вероятно, является способом выхода.

В jQuery 1.2.6 вы можете использовать одну из основных функций CSS, height и width (или outerHeight и outerWidth, если это необходимо).

var height = $("#myDiv").height();
var width = $("#myDiv").width();

var docHeight = $(document).height();
var docWidth = $(document).width();
Поделиться
33

На всякий случай это полезно для всех, я помещаю текстовое поле, кнопку и div все с тем же 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
Поделиться
  • 1
    Просто чтобы прояснить ... любой из этих браузеров делает что-то отличное от другого? Я не могу найти никаких различий ... Кроме того, я не голосую с понижением (пока), но это на самом деле не дает прямого ответа на вопрос, хотя это можно легко отредактировать, чтобы сделать это.
  • 1
    Не был нацелен на то, чтобы ответить на вопрос - его уже ответили. Просто некоторая полезная информация и да, все основные браузеры последних версий согласны с этими значениями - и это хорошо.
Показать ещё 2 комментария
6

Согласно MDN: определение размеров элементов

offsetWidth и offsetHeight возвращают "общий объем пространства, занимаемого элементом, включая ширину видимого содержимого, полосы прокрутки (если есть), отступы и границы"

clientWidth и clientHeight возвращают "сколько места занимает фактическое отображаемое содержимое, включая отступы, но не включая границы, поля или полосы прокрутки"

scrollWidth и scrollHeight возвращают "фактический размер контента, независимо от того, какой его объем в данный момент виден"

Таким образом, это зависит от того, ожидается ли, что измеренное содержимое выйдет за пределы текущей видимой области.

Поделиться
4

Вам нужно только вычислить его для 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> любого размера и сжимает его до размера его содержимого.

Поделиться
1

Стили элементов легко изменить, но немного сложно прочитать значение.

JavaScript не может прочитать любое свойство стиля элемента (elem.style), исходящее из css (внутреннее/внешнее), если вы не используете встроенный вызов метода getComputedStyle в javascript.

getComputedStyle (element [, pseudo])

Элемент: элемент, для которого нужно прочитать значение.
псевдо: псевдоэлемент, если требуется, например, :: before. Пустая строка или отсутствие аргумента означает сам элемент.

В результате получается объект со свойствами стиля, например, elem.style, но теперь по отношению ко всем классам CSS.

Например, здесь стиль не видит поля:

<head>
  <style> body { color: red; margin: 5px } </style>
</head>
<body>

  <script>
    let computedStyle = getComputedStyle(document.body);

    // now we can read the margin and the color from it

    alert( computedStyle.marginTop ); // 5px
    alert( computedStyle.color ); // rgb(255, 0, 0)
  </script>

</body>

Поэтому изменил ваш код javaScript, включив в него getComputedStyle элемента, для которого вы хотите получить его width/height или другой атрибут

window.onload = function() {

    var test = document.getElementById("test");
    test.addEventListener("click", select);


    function select(e) {                                  
        var elementID = e.target.id;
        var element = document.getElementById(elementID);
        let computedStyle = getComputedStyle(element);
        var width = computedStyle.width;
        console.log(element);
        console.log(width);
    }

}

Вычисленные и разрешенные значения

В 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) - нет:

<style>
  body {
    margin: 30px;
    height: 900px;
  }
</style>
<script>
  let style = getComputedStyle(document.body);
  alert(style.margin); // empty string in Firefox
</script>

для получения дополнительной информации https://javascript.info/styles-and-classes

Поделиться
1

... кажется 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>
Поделиться
1

element.offsetWidth и element.offsetHeight должен делать, как было предложено в предыдущем посте.

Однако, если вы просто хотите сосредоточить контент, есть лучший способ сделать это. Предполагая, что вы используете xhtml strict DOCTYPE. установите margin: 0, свойство auto и требуемую ширину в px для тега body. Содержимое выравнивается по центру со страницей.

Поделиться
  • 1
    Я думаю, что он тоже хочет центрировать его по вертикали, что является правильным испытанием для CSS, если вы не соответствуете определенным критериям (например, контент известного размера)
0

var box = document.querySelector('div');

//ширина и высота в пикселях, включая отступ и рамку

var width = box.offsetWidth; var height = box.offsetHeight;

//ширина и высота в пикселях, включая отступы, но без рамки

var width = box.clientWidth; var height = box.clientHeight;

Поделиться
0

Вот код для WKWebView, который определяет высоту определенного элемента Dom (не работает должным образом для всей страницы)

let html = "<body><span id=\"spanEl\" style=\"font-family: '\(taskFont.fontName)'; font-size: \(taskFont.pointSize - 4.0)pt; color: rgb(\(red), \(blue), \(green))\">\(textValue)</span></body>"
webView.navigationDelegate = self
webView.loadHTMLString(taskHTML, baseURL: nil)

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.getElementById(\"spanEl\").getBoundingClientRect().height;") { [weak self] (response, error) in
        if let nValue = response as? NSNumber {

        }
    }
}
Поделиться
  • 0
    просто чтобы прояснить, это iOS swift код, верно? Не JavaScript. Я отказываюсь от понижения (это может быть довольно полезно), но учтите, что это не отвечает на вопрос и, скорее всего, будет более уместным по другому, специфичному для iOS вопросу. Если ничего еще не существует, возможно, подумайте над тем, чтобы задать вопрос и ответить на него.
0

также вы можете использовать этот код:

var divID = document.getElementById("divid");

var h = divID.style.pixelHeight;
Поделиться
  • 1
    Хм, работает в Chrome и IE9, похоже, не работает в Firefox. Это работает только для определенных типов документов?
-4

Если offsetWidth возвращает 0, вы можете получить свойство ширины стиля элемента и найти его для числа. "100px" → 100

/\ d */. Exec (MyElement.style.width)

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню