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

我应该用什么?请提供有关浏览器兼容性的信息.

推荐答案

您应该使用.offsetWidth.offsetHeight属性.

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

Function .getBoundingClientRect()在执行CSS转换后以浮点数的形式返回元素的维度和位置.

> 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,
}

Javascript相关问答推荐

如何避免移动设备中出现虚假调整大小事件?

GrapeJS -如何保存和加载自定义页面

从WooCommerce Checkout Country字段重新排序国家,保持国家同步

点击按钮一次有文本出现和褪色,而不是点击两次?(html,CSS,JavaScript)

如何修复我的js构建表每当我添加一个额外的列作为它的第一列?

为什么当我解析一个promise时,输出处于挂起状态?

构造HTML表单以使用表单数据创建对象数组

虚拟滚动实现使向下滚动可滚动到末尾

使用POST请求时,Req.Body为空

您能在卸载程序(QtInsteller框架)上添加WizardPage吗?

使用VUE和SCSS的数字滚动动画(&;内容生成)

自定义图表工具提示以仅显示Y值

第一项杀死下一项,直到数组长度在javascript中等于1

将嵌套数组的元素乘以其深度,输出一个和

如何通过Axios在GraphQL查询中发送数组

自动滚动功能在当前图像左侧显示上一张图像的一部分

我怎样才能得到一个数组的名字在另一个数组?

单击子按钮时将活动切换类添加到父分区

使用JavaScript或PHP从div ID值创建锚标记和链接

为什么我的Reaction组件不能使用createBrowserRouter呈现?