Question

我无法读取绝对定位元素高度。

我的主要目标是设置另一个DIV，它将淡化黑色背景以填满整页，但我无处可去......

我尝试了document.body.scrollWidth，但这只适用于加载阶段的开始。当主DIV加载时，它比褪色一个占用更多空间，并且在底部有空间没有填充褪色DIV元素。

有人可以帮忙吗？

div#main_theater{
    position: absolute;
    left: 80px;
    top: 0;
    background-color: #EEE4B9;
    width: 940px;
    opacity: 1; 
    z-index: 100;
}
div#blackOut{
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    background-color: #000;
    width: 100%;
    z-index: 10;
    color: #fff;
    opacity: .7;
}

这是工作（一开始）：

var picHeight = document.body.scrollWidth;
blackOut = document.createElement('div');
blackOut.setAttribute('id','blackOut');
blackOut.style.height = picHeight + 'px';

在AJAX调用PHP脚本之后，我获得了新的窗口大小。 div#main_theater的新尺寸更大，而div#blackOut则更大。

if(document.getElementById('main_theater')){    
    blackOut.style.height = document.getElementById('main_theater').style.height;
}

当AJAX呼叫结束时，div#main_theater大于之前的身高。另外，在AJAX调用之后，我尝试在重新流后读取scrollHeight / offsetHeight，并且数字与之前相同（？）......

编辑：AJAX responseText可能会加载文档，但JS中的下一个命令太快，无法捕获图像加载时的实际文档大小。在我看来，图像不是在如此短的时间内加载，因此文件的大小不能被正确加载。

Answer 1

为什么不使用固定定位。像这样：

<style>
div#totaldude {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: black;
    opacity: 0;
}
</style>

<script>
    $("body").append("div id='totaldude'></div>"); 
    $("#totaldude").fadeTo("fast", 0.5);
</script>

绝对定位元素的计算高度

1 个答案: