Это единственное, что помогло мне:

element.clientWidth -
parseFloat(window.getComputedStyle(element, null).getPropertyValue("padding-left")) -
parseFloat(window.getComputedStyle(element, null).getPropertyValue("padding-right"))

Я создал для этого служебную функцию с высокой гибкостью:

export type Size = {width: number, height: number};
export enum GetSize_Method {
    /** Includes: content, padding. Excludes: border, margin, scroll-bar (if it has one), "position:absolute" descendants. */
    ClientSize = "ClientSize",
    /** Includes: content, padding, border, margin, scroll-bar (if it has one). Excludes: "position:absolute" descendants. */
    OffsetSize = "OffsetSize",
    /** Includes: content, padding, border, margin, scroll-bar (if it has one), "position:absolute" descendants. Excludes: none. */
    ScrollSize = "ScrollSize",
    /** Same as ScrollSize, except that it's calculated after the element's css transforms are applied. */
    BoundingClientRect = "BoundingClientRect",
    /** Lets you specify the exact list of components you want to include in the size calculation. */
    Custom = "Custom",
}
export type SizeComp = "content" | "padding" | "border" | "margin" | "scrollBar" | "posAbsDescendants";

export function GetSize(el: HTMLElement, method = GetSize_Method.ClientSize, custom_sizeComps?: SizeComp[]) {
    let size: Size;
    if (method == GetSize_Method.ClientSize) {
        size = {width: el.clientWidth, height: el.clientHeight};
    } else if (method == GetSize_Method.OffsetSize) {
        size = {width: el.offsetWidth, height: el.offsetHeight};
    } else if (method == GetSize_Method.ScrollSize) {
        size = {width: el.scrollWidth, height: el.scrollHeight};
    } else if (method == GetSize_Method.BoundingClientRect) {
        const rect = el.getBoundingClientRect();
        size = {width: rect.width, height: rect.height};
    } else if (method == GetSize_Method.Custom) {
        const style = window.getComputedStyle(el, null);
        const styleProp = (name: string)=>parseFloat(style.getPropertyValue(name));

        const padding = {w: styleProp("padding-left") + styleProp("padding-right"), h: styleProp("padding-top") + styleProp("padding-bottom")};
        const base = {w: el.clientWidth - padding.w, h: el.clientHeight - padding.h};
        const border = {w: styleProp("border-left") + styleProp("border-right"), h: styleProp("border-top") + styleProp("border-bottom")};
        const margin = {w: styleProp("margin-left") + styleProp("margin-right"), h: styleProp("margin-top") + styleProp("margin-bottom")};
        const scrollBar = {w: (el.offsetWidth - el.clientWidth) - border.w - margin.w, h: (el.offsetHeight - el.clientHeight) - border.h - margin.h};
        const posAbsDescendants = {w: el.scrollWidth - el.offsetWidth, h: el.scrollHeight - el.offsetHeight};

        const sc = (name: SizeComp, valIfEnabled: number)=>custom_sizeComps.includes(name) ? valIfEnabled : 0;
        size = {
            width: sc("content", base.w) + sc("padding", padding.w) + sc("border", border.w)
                    + sc("margin", margin.w) + sc("scrollBar", scrollBar.w) + sc("posAbsDescendants", posAbsDescendants.w),
            height: sc("content", base.h) + sc("padding", padding.h) + sc("border", border.h)
                    + sc("margin", margin.h) + sc("scrollBar", scrollBar.h) + sc("posAbsDescendants", posAbsDescendants.h),
        };
    }
    return size;
}

Использование:

const el = document.querySelector(".my-element");
console.log("Size:", GetSize(el, "ClientSize"));
console.log("Size:", GetSize(el, "Custom", ["content", "padding", "border"]));

Используйте следующие параметры ширины:

   style={{
      width: "80%",
      paddingLeft: 100,
      paddingRight: 200,
      paddingTop: 30,
      paddingBottom: 30,
      border: "3px solid lightGray",
    }}

Flex

Если вы хотите отобразить в своем <div> какое-то всплывающее сообщение в центре экрана - тогда вам не нужно читать размер <div>, но вы можете использовать flex

.box {
  width: 50px;
  height: 20px;
  background: red;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  position: fixed; /* remove this in case there is no content under div (and remember to set body margins to 0)*/
}

<div class="container">
  <div class="box">My div</div>
</div>

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

        }
    }
}

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

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

getComputedStyle (элемент [, псевдо])

Элемент: Элемент, для которого нужно прочитать значение.
псевдо: Псевдоэлемент, если требуется, например :: 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. Это может выглядеть например, height: 1em или font-size: 125%.

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

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

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

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

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

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

Есть другие несоответствия. Например, некоторые браузеры (Chrome) показывают 10 пикселей в приведенном ниже документе, а некоторые из них (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

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

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

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

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

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

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

Взгляните на 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 в простой объект

Ссылка:

• .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/getBoundingClientRect

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

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

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

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

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

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

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