如何获取文档的整个宽度和高度（无jQuery）

Startec 发表于 Dev

Startec

在按钮上单击我要创建div的页面的整个宽度和高度。不仅可见页面，而且整个呈现的文档。

到目前为止，我正在使用此SO分析器中的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，但我不想使用它。

奖励点是在调整窗口大小时保持覆盖层在整个屏幕宽度上伸展的最佳方法。

特拉维斯J

您可以使用一种方法，将元素放置在页面的右下角，然后在窗口更改大小的情况下查看偏移量

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;
};

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。