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

. Обратите внимание, что они принадлежат элементу, а не

. Этот метод возвращает объект, содержащий .offsetWidth и .offsetHeight и некоторые другие полезные значения: .style Глядя на вывод

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

Но ответьте на вопрос выше {* } Текст в div выбирается нажатием на него с помощью следующей функции jQuery: 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 Другое отличие: может возвращать дробные пиксели, где С чем вы столкнулись

округляется до ближайшего целого числа. { *} IE8 Note getBoundingClientRect() не возвращает высоту и ширину для .offsetWidth и .offsetHeight и ниже. *

Must : getBoundingClientRect Стоит отметить, что объект, возвращаемый этим методом, на самом деле не является IE8 объектом. Его свойства не

для этого, вы можете передать флаг: { *} Вот как: перечисляемый поддерживает IE8, используйте .offsetWidth и .offsetHeight:

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

(например, Обычная . Его свойства не являются перечисляемыми (поэтому, например, Object.keys не работает из коробки).

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

Ссылка:

ПРИМЕЧАНИЕ : этот ответ был написан в 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();

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

согласно возвращаемому Apache

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

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

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

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

Семантика мой мальчик. Семантика.

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

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

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

getComputedStyle (element [, pseudo])

Элемент: Элемент, для которого нужно прочитать значение.
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>

в этом выпуске

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>

для получения дополнительной информации к вашему маршруту config:

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

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

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

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

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

var h = divID.style.pixelHeight;

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

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

Вот код для 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 {

        }
    }
}

Если offsetWidth возвращает 0, вы можете получить свойство style для элемента width и найти его по числу. «100px» — & Gt ; 100

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