offsetHeight和offsetWidth在第一次onclick事件时计算错误，而不是第二次

Question

我已经编写了下面的脚本来显示一个隐藏元素，然后将它的位置固定在页面的中心。

function popUp(id,type) {
var popUpBox = document.getElementById(id);
popUpBox.style.position = "fixed";
popUpBox.style.display = "block";
popUpBox.style.zIndex = "6";
popUpBox.style.top = "50%";
popUpBox.style.left = "50%";
var height = popUpBox.offsetHeight;
var width = popUpBox.offsetWidth;
var marginTop = (height / 2) * -1;
var marginLeft = (width / 2) * -1;
popUpBox.style.marginTop = marginTop + "px";
popUpBox.style.marginLeft = marginLeft + "px";
}

当这个函数被onclick事件调用时，offsetHeight和offsetWidth的计算不正确，因此不能正确地居中元素。如果我再次点击onclick元素，offsetHeight和offsetWidth计算正确。

我试过用我能想到的每一种方法来改变顺序，但这让我发疯了!任何帮助都非常感激!

Answer 1

我猜你的高度和宽度没有在父级上定义。看看这把小提琴在哪里好用。男孩，我很聪明。http://jsfiddle.net/mrtsherman/SdTEf/1/

老回答

我认为这可以做得更简单。您正在将顶部和左侧属性设置为50%。这将使固定元素稍微偏离中心。我认为你试图用负边距把它拉回正确的位置。相反，只需从一开始就计算正确的上/左值，不要担心边距。这是一个jQuery解决方案，但它可以很容易地适应纯js。我也认为你当前的代码不会工作，如果窗口已经滚动。

//this code will center the following element on the screen
$('#elementid').click(function() {
    $(this).css('position','fixed');
    $(this).css('top', (($(window).height() - $(this).outerHeight()) / 2) + $(window).scrollTop() + 'px');
    $(this).css('left', (($(window).width() - $(this).outerWidth()) / 2) + $(window).scrollLeft() + 'px');
});