发表新帖
发表新帖

How do I retrieve an HTML element's actual width and height?

前端 未结
关注
14 1662
后悔当初
后悔当初 2020-11-22 02:29

Suppose that I have a

that I wish to center in the browser\'s display (viewport). To do so, I need to calculate the width and height of the &l
相关标签:
14条回答
  • 谎友^
    2020-11-22 02:43

    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;}
</style>
<body><div>test<br>test</div></body>

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

    0 讨论(0)
  • 盖世英雄少女心
    2020-11-22 02:44

    Just in case it is useful to anyone, I put a textbox, button and div all with the same 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>

    I tried it in chrome, firefox and ie-edge, I tried with jquery and without, and I tried it with and without box-sizing:border-box. Always with <!DOCTYPE html>

    The results:

                                                                   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
    0 讨论(0)
  • 日久生厌
    2020-11-22 02:45

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

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

    0 讨论(0)
  • 眼角桃花
    2020-11-22 02:49

    You should use the .offsetWidth and .offsetHeight properties. Note they belong to the element, not .style.

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

    Function .getBoundingClientRect() returns dimensions and location of element as floating-point numbers after performing CSS transforms.

    > console.log(document.getElementById('id').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}
    0 讨论(0)
  • 既然无缘
    2020-11-22 02:52

    also you can use this code:

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

var h = divID.style.pixelHeight;
    0 讨论(0)
  • 野的像风
    2020-11-22 02:56

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题