如何检索HTML元素的实际宽度和高度?

假设我有一个<div>，我希望它位于浏览器显示(视口)的中央。为此，我需要计算<div>元素的宽度和高度。

我应该用什么?请包括浏览器兼容性信息。

当前回答

你只需要为IE7和更老版本计算它(只有当你的内容没有固定大小时)。我建议使用HTML条件注释来限制攻击不支持CSS2的旧ie。对于所有其他浏览器使用这个:

<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>居中，并将其收缩到其内容的大小。

2008-11-16 20:57:23

其他回答

注:这个答案写于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();

2008-11-16 19:29:19

这是唯一对我有效的方法:

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

2022-01-25 16:47:49

下面是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 {

        }
    }
}

2018-05-31 11:52:38

以防它对任何人都有用，我把一个文本框，按钮和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

2016-02-19 12:52:13

看一下Element.getBoundingClientRect()。

这个方法将返回一个包含宽度、高度和其他一些有用值的对象:

{
    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将四舍五入到最近的整数。

注意:getBoundingClientRect在IE8及以下不返回高度和宽度

如果你必须支持IE8，使用.offsetWidth和.offsetHeight:

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

值得注意的是，该方法返回的对象并不是真正的普通对象。它的属性是不可枚举的(例如，Object。钥匙不能开箱即用。)

更多信息请点击这里: 如何最好地将一个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

2015-09-18 18:37:04

如何检索HTML元素的实际宽度和高度?

推荐文章

最新文章

标签