如何用原生JavaScript动态获取宽高并居中非body直接子元素div

我来帮你解决这个问题——要获取动态变化的对话框宽高，原生JS里有现成的属性可以直接用，不用硬写固定值。下面一步步来调整你的代码：

核心：获取动态元素的宽高 #

如果你的对话框宽高是动态变化的（比如内容撑开、响应式调整），可以用这两个原生属性拿到元素实际渲染后的尺寸：

方法1：offsetWidth & offsetHeight #

这两个属性返回元素的布局宽高，包含内容、内边距（padding）和边框（border），完全适配居中计算的需求。

需要注意：如果对话框初始是display: none，直接获取宽高会得到0，所以要先让它在视觉上不可见但保留布局，拿到尺寸后再显示。

修改后的完整代码：

var showDialog = function(){
  var body = document.body;
  var html = document.documentElement;
  // 获取文档实际宽高（覆盖滚动区域的情况）
  var bodyHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
  var bodyWidth = Math.max(body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth);
  
  var dialog = document.getElementById('MyDialog');
  
  // 处理初始隐藏无法获取尺寸的问题
  if (dialog.style.display === 'none') {
    dialog.style.display = 'block';
    dialog.style.visibility = 'hidden'; // 视觉隐藏，但保留布局计算
  }
  
  // 获取动态计算后的对话框宽高
  var dialogWidth = dialog.offsetWidth;
  var dialogHeight = dialog.offsetHeight;
  
  // 计算居中位置
  dialog.style.left = (bodyWidth / 2) - (dialogWidth / 2) + 'px';
  dialog.style.top = (bodyHeight / 2) - (dialogHeight / 2) + 'px';
  
  // 最终显示对话框
  dialog.style.visibility = 'visible';
}

方法2：getBoundingClientRect() #

这个方法返回一个DOMRect对象，包含元素的width、height等布局信息，用法也很直观：

// 替换上面的宽高获取部分
var rect = dialog.getBoundingClientRect();
var dialogWidth = rect.width;
var dialogHeight = rect.height;

效果和offsetWidth/offsetHeight基本一致，你可以根据习惯选择。

额外优化：窗口 resize 时自动重居中 #

如果用户调整窗口大小，对话框可能会偏离中心，你可以监听窗口的resize事件，自动重新计算位置：

window.addEventListener('resize', function() {
  var dialog = document.getElementById('MyDialog');
  // 只在对话框显示时执行重居中
  if (window.getComputedStyle(dialog).display !== 'none') {
    showDialog();
  }
});

内容的提问来源于stack exchange，提问作者Emaborsa