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

Question

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

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

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

12 654

javascript html xhtml-1.0-strict dhtml

12 ответов:

посмотри 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;
стоит отметить, что объект, возвращаемый этим методом, на самом деле не является нормальный

122

Примечание:этот ответ был написан в 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();

56

на всякий случай это полезно для всех, я поставил текстовое поле, кнопку и 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

30

вам нужно только вычислить его для IE7 и старше (и только если ваш контент не имеет фиксированного размера). Я предлагаю использовать условные комментарии HTML для ограничения взлома старых IEs, которые не поддерживают 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> любого размера, и сжимает-оборачивает его к размеру своего содержания.

4

по данным MDN: Определение размеров элементов

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

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

scrollWidth и scrollHeight вернуть " фактический размер содержания, независимо от того, сколько его в настоящее время видно"

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

3

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

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

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

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

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

getComputedStyle (element [, pseudo])

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

результатом является объект со свойствами стиля, например elem.стиль, но теперь по отношению ко всем классам 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 элемента, который вы хотите получить, это ширина / высота или другой атрибут
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%.

разрешенное значение стиля-это то, которое в конечном итоге применяется к элементу. Такие ценности, как 1эм или 125% являются относительными. Браузер принимает вычисленное значение и делает все единицы фиксированными и абсолютными, например: высота:20 пикселей или размер шрифта: 16px. Для свойств геометрии разрешенные значения может иметь плавающую точку, например ширина: 50.5 px.

давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что разрешенные значения гораздо удобнее, и стандарт изменился.
Таким образом, в настоящее время getComputedStyle фактически возвращает разрешенное значение свойства.

Обратите Внимание:

getComputedStyle требуется полное имя свойства

вы всегда должны попросить точное свойство, которое вы хотите, например paddingLeft или высота или ширина. В противном случае правильный результат не гарантирован.

например, если есть свойства paddingLeft/ paddingTop, то что мы должны получить для getComputedStyle (elem).обивка? Ничего, или может быть, "сгенерированное" значение из известных прокладок? Там нет стандарта здесь править.

там есть и другие нестыковки. Например, некоторые браузеры (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

также вы можете использовать этот код:
var divID = document.getElementById("divid");

var h = divID.style.pixelHeight;

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

Если offsetWidth возвращает 0, вы можете получить свойство style width элемента и найти в нем число. "100px" - > 100

/ \d*/.exec (MyElement.стиль.ширина)

-3

Greg · Accepted Answer · 2008-11-16 21:35:11

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

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