假设我有一个<div>,我希望它位于浏览器显示(视口)的中央。为此,我需要计算<div>元素的宽度和高度。
我应该用什么?请包括浏览器兼容性信息。
假设我有一个<div>,我希望它位于浏览器显示(视口)的中央。为此,我需要计算<div>元素的宽度和高度。
我应该用什么?请包括浏览器兼容性信息。
当前回答
根据MDN:确定元素的尺寸
offsetWidth和offsetHeight返回“一个元素占用的空间总量,包括可见内容的宽度、滚动条(如果有的话)、填充和边框”
clientWidth和clienttheight返回“实际显示内容占用的空间大小,包括填充,但不包括边框、页边距或滚动条”
scrollWidth和scrollHeight返回“内容的实际大小,不管当前有多少可见”
因此,这取决于所测量的内容是否预计在当前可视区域之外。
其他回答
下面是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();
元素。offsetWidth和元素。offsetHeight应该这样做,就像在之前的帖子中建议的那样。
但是,如果您只想集中内容,还有更好的方法。假设您使用严格的xhtml DOCTYPE。设置body标签的margin:0,auto属性和所需宽度(px)。内容与页面居中对齐。
你只需要为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>居中,并将其收缩到其内容的大小。
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 >