Question

我有以下HTML：

<div id="modal">
   <div class="block-border" style="width: 900px; height: 450px;">
   xxx
   </div>
</div>

我正在尝试这个脚本：

var modal = document.getElementById('modal');
var modal_width = modal.width;
var modal_height = modal.height;
var window_width = window.width;
var window_height = window.height;
modal.style.left = window_width / 2 - modal_width / 2;
modal.style.top = window_height / 2 - modal_height / 2;

当我检查模态变量时，它看起来是正确的。但是modal_width和modal_height变量显示未定义。我尝试将宽度和高度样式移动到第一个div，但我仍然找不到宽度和高度。

Answer 1

document.getElementById('modal') 在这种情况下不会工作，因为根本没有id='modal' ...只有一个名为'modal'的类

尝试document.getElementsByClassName('modal')[0]而不是......

Answer 2

第二个想法，我的评论是一个答案：p它不应该是！

“宽度”有一些不同的定义，这就是元素不仅仅有width的原因。

您当然可以获得样式所定义的宽度：modal.style.width - 但是，请记住，它将随附单元返回，因此您可能需要通过它运行它 parseInt(modal.style.width,10)。此外，这不包括任何填充或边框样式，如果您使用.left，则需要这些样式...除非您还有box-sizing:border-box，并且它仅适用于内联样式（您使用不应该使用）。

总的来说，modal.offsetWidth可能会更好。此宽度始终包含填充的边框，并且可用于居中。

那就是说，考虑一个纯CSS解决方案：

.modal>div {
    width:900px;
    height:450px;
    position:absolute; /* or "fixed", depending on the desired effect */
    left:0; top:0; right:0; bottom:0;
    margin:auto;
}

一切都很好，无论内容大小如何，这都应该完美地集中你的模态框。好吧......如果内容大于屏幕，也许你可能遇到问题，但在大多数情况下，它很好。

如何使用javascript找出模态对话框的宽度和高度？

2 个答案: