假设我有一个<div>,我希望它位于浏览器显示(视口)的中央。为此,我需要计算<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 {
}
}
}
其他回答
注:这个答案写于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();
Flex
如果你想在<div>中显示屏幕中心的某种弹出消息,那么你不需要读取<div>的大小,但你可以使用flex
.box { 宽度:50 px; 高度:20 px; 背景:红色; } .container { 显示:flex; justify-content:中心; 对齐项目:中心; 身高:100 vh; 宽度:100大众; 位置:固定;/*如果div下没有内容,则删除它(并且记住将正文边距设置为0)*/ } < div class = "容器" > <div class="box">我的div</div> < / div >
你应该使用. offsetwidth和. offsetheight属性。 注意它们属于元素,而不是.style。
var width = document.getElementById('foo').offsetWidth;
. getboundingclientrect()函数的作用是:在执行CSS转换后,以浮点数的形式返回元素的尺寸和位置。
> console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
bottom: 177,
height: 54.7,
left: 278.5,
right: 909.5,
top: 122.3,
width: 631,
x: 278.5,
y: 122.3,
}
... 看起来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>
看一下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