HTML 요소의 실제 너비와 높이를 어떻게 검색합니까?

lottogame 2020. 9. 29. 07:11

HTML 요소의 실제 너비와 높이를 어떻게 검색합니까?

<div>브라우저의 디스플레이 (뷰포트)에 중앙에 배치 하려는가 있다고 가정합니다 . 이렇게하려면 <div>요소 의 너비와 높이를 계산해야합니다 .

무엇을 사용해야합니까? 브라우저 호환성에 대한 정보를 포함하십시오.

.offsetWidth.offsetHeight속성을 사용해야합니다 . 이들은 요소가 아니라 요소에 속합니다 .style.

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

를보세요 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 참고 : IE8 이하에서는 getBoundingClientRect높이와 너비를 반환하지 않습니다 . *

IE8을 지원 해야하는 경우 .offsetWidth.offsetHeight다음을 사용하십시오 .

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

이 메서드에 의해 반환 된 Object가 실제로는 정상적인 객체 가 아니라는 점에 주목할 가치가 있습니다. 해당 속성은 열거 할 수 없습니다 (예 : 기본적으로Object.keys 작동하지 않음).

여기에 대한 자세한 정보 : ClientRect / DomRect를 일반 개체로 변환하는 가장 좋은 방법


참고 : 이 답변은 2008 년에 작성되었습니다. 당시 대부분의 사람들에게 가장 적합한 브라우저 간 솔루션은 실제로 jQuery를 사용하는 것이 었습니다. 나는 후손을 위해 여기에 대답을 남겨두고 jQuery를 사용하는 경우 이것이 좋은 방법입니다. 다른 프레임 워크 나 순수 JavaScript를 사용하는 경우 허용되는 대답이 아마도 갈 길일 것입니다.

jQuery를 1.2.6의로서 당신은 핵심 중 하나를 사용할 수 있습니다 CSS 기능 , heightwidth(또는 outerHeightouterWidth적절하게).

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

var docHeight = $(document).height();
var docWidth = $(document).width();

누구에게나 유용 할 경우를 대비하여 동일한 CSS로 텍스트 상자, 버튼 및 div를 모두 넣습니다.

border:solid 1px #000;

<input id="t" type="text" />
<input id="b" type="button" />
<div   id="d"></div>

나는 크롬, 파이어 폭스 및 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

MDN 에 따르면 : 요소의 크기 결정

offsetWidth그리고 offsetHeight"보이는 내용의 너비, 스크롤바 (있는 경우), 패딩 및 테두리를 포함하여 요소가 차지하는 총 공간 양"을 반환합니다.

clientWidth그리고 clientHeight"패딩을 포함하여 테두리, 여백 또는 스크롤바는 포함하지 않고 실제 표시된 콘텐츠가 차지하는 공간의 양" 반환합니다.

scrollWidth그리고 scrollHeight"그것의 많은 부분이 현재 표시 방법에 관계없이, 내용의 실제 크기의"를 반환

따라서 측정 된 콘텐츠가 현재 볼 수있는 영역을 벗어날 것으로 예상되는지 여부에 따라 다릅니다.

You only need to calculate it for IE7 and older (and only if your content doesn't have fixed size). I suggest using HTML conditional comments to limit hack to old IEs that don't support CSS2. For all other browsers use this:

<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;}

This is the perfect solution. It centers <div> of any size, and shrink-wraps it to size of its content.

It is easy to modify the elements styles but kinda tricky to read the value.

JavaScript can't read any element style property ( coming from css(internal/external) unless you use the built in method call getComputedStyle in javascript.

getComputedStyle(element[, pseudo])

Element: The element to read the value for.
pseudo: A pseudo-element if required, for instance ::before. An empty string or no argument means the element itself.

The result is an object with style properties, like, but now with respect to all css classes.

For instance, here style doesn’t see the margin:

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

    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)


So modified your javaScript code to include the getComputedStyle of the element you wish to get it's width/height or other attribute

window.onload = function() {

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

    function select(e) {                                  
        var elementID =;
        var element = document.getElementById(elementID);
        let computedStyle = getComputedStyle(element);
        var width = computedStyle.width;


Computed and resolved values

There are two concepts in CSS:

A computed style value is the value after all CSS rules and CSS inheritance is applied, as the result of the CSS cascade. It can look like height:1em or font-size:125%.

A resolved style value is the one finally applied to the element. Values like 1em or 125% are relative. The browser takes the computed value and makes all units fixed and absolute, for instance: height:20px or font-size:16px. For geometry properties resolved values may have a floating point, like width:50.5px.

A long time ago getComputedStyle was created to get computed values, but it turned out that resolved values are much more convenient, and the standard changed.
So nowadays getComputedStyle actually returns the resolved value of the property.

Please Note:

getComputedStyle requires the full property name

You should always ask for the exact property that you want, like paddingLeft or height or width. Otherwise the correct result is not guaranteed.

For instance, if there are properties paddingLeft/paddingTop, then what should we get for getComputedStyle(elem).padding? Nothing, or maybe a “generated” value from known paddings? There’s no standard rule here.

There are other inconsistencies. As an example, some browsers (Chrome) show 10px in the document below, and some of them (Firefox) – do not:

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

for more information

element.offsetWidth and element.offsetHeight should do, as suggested in previous post.

However, if you just want to center the content, there is a better way of doing so. Assuming you use xhtml strict DOCTYPE. set the margin:0,auto property and required width in px to the body tag. The content gets center aligned to the page.

... seems CSS help to put div on center ...

 .monitor {
 position:fixed;/* ... absolute possible if on :root */
 .wrapper {
 width:200px;/* this is size range */

 .content {
 width: 100%;height:100%;


 <div class="monitor">
  <div class="wrapper">
   <div class="content">

 ... so you hav div 200px*100px on center ...


also you can use this code:

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

var h =;

if you need to center it in the browser's display port; you can achieve it with CSS only

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

Here is the code for WKWebView what determines a height of specific Dom element (doesn't work properly for whole page)

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 {


If offsetWidth returns 0, you can get element's style width property and search it for a number. "100px" -> 100


참고URL :