it-swarm.com.ru

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

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

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

769
snortasprocket

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

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

1124
Greg

Посмотрите на 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;

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

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

Ссылка:

159
Zach Lysobey

NOTE: этот ответ был написан в 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();
59
tvanfosson

На всякий случай, если это кому-нибудь пригодится, я помещаю текстовое поле, кнопку и 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
37
Graham

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

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

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

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

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

12
HarlemSquirrel

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

4
Kornel

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

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

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 или height или width. В противном случае правильный результат не гарантируется.

Например, если есть свойства 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

2
Lekens

... кажется, 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
sanecin

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

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

1
questzen

если вам нужно центрировать его в порт дисплея браузера; Вы можете достичь этого только с помощью CSS

yourSelector {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
0
tdjprog

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

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

var h = divID.style.pixelHeight;
0
mohammad