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

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


当前回答

注:这个答案写于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年。当时,对于大多数人来说,最好的跨浏览器解决方案就是使用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返回0,你可以获取元素的样式宽度属性并搜索一个数字。100px -> 100

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

根据MDN:确定元素的尺寸

offsetWidth和offsetHeight返回“一个元素占用的空间总量,包括可见内容的宽度、滚动条(如果有的话)、填充和边框”

clientWidth和clienttheight返回“实际显示内容占用的空间大小,包括填充,但不包括边框、页边距或滚动条”

scrollWidth和scrollHeight返回“内容的实际大小,不管当前有多少可见”

因此,这取决于所测量的内容是否预计在当前可视区域之外。

你也可以使用下面的代码:

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

var h = divID.style.pixelHeight;

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

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