javascript - 如何获取文档的整个宽度和高度(无 jQuery)

Question

在单击按钮时，我想制作一个 div，它是页面的整个宽度和高度。不仅是可见页面，还有整个呈现的文档。

到目前为止，我正在使用来自 this SO anser 的 Javascript计算高度:

 var B = document.body,
     H = document.documentElement,
     height;
            if (typeof document.height !== 'undefined') {
                height = document.height;
            } else {
                height = Math.max( B.scrollHeight, B.offsetHeight, H.clientHeight, H.scrollHeight, H.offsetHeight );
            }
            var overlay = document.createElement('div');
            overlay.style.position = 'absolute';
            overlay.style.width = window.innerWidth + 'px';
            overlay.style.height = height + 'px';
            overlay.style.top = window.scrollY + 'px';
            overlay.style.left = 0;

但这并不总是有效。有时，当我向下滚动到页面底部时，叠加层开始出现在页面较低的位置，并显着延长了文档的长度。有时它工作正常，有时它不工作。我知道有一些方法可以用 jQuery 做到这一点，但我不想使用它。

奖励积分将是在窗口调整大小时保持覆盖在整个屏幕宽度上拉伸(stretch)的最佳方式....谢谢

Answer 1

您可以使用一种方法，将一个元素放在页面的右下角，然后在窗口大小发生变化时查看偏移量

var getDimensions = document.createElement("div");
getDimensions.setAttribute("style", "visibility:hidden;position:fixed;bottom:0px;right:0px;");
document.getElementsByTagName("body")[0].appendChild(getDimensions);
var Width = getDimensions.offsetLeft;
var Height = getDimensions.offsetTop;
window.onresize = function(){
 Width = getDimensions.offsetLeft;
 Height = getDimensions.offsetTop;
};