绝对定位元素的计算高度

Computed height of absolute positioned element

本文关键字：计算 高度 元素 定位      更新时间：2023-09-26

我在读取绝对定位元素高度时遇到问题。

我的主要目标是设置另一个DIV，它将淡出黑色背景以填充整个页面，但我不会去任何地方。。。

我尝试了document.body.scrollWidth，但它只在加载阶段开始时有效。当主DIV加载时，它比渐变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，数字与之前相同(？(。。。

EDIT：AJAX responseText可能加载一个文档，但JS中的下一个命令太快，无法在加载图像时捕获真实的文档大小。在我看来，图像并没有在这么短的时间内加载，所以文件的大小无法正确读取。

为什么不使用固定定位呢。类似这样的东西：

<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>
相关文章：