关于body.clientHeight，body.clientWidht获取的不是可视高度的问题

我发现网上一些教程可能都是10几年前的老古董了，经过不知道多少号复制翻新，导致有时候你很难去发现问题，甚至是大部分的教程都是这么写的，害人不浅。

问题的经过是这样的，我需要获取页面的可视高度。网上搜一搜，全部都说使用body.clientHeight来获取，结果嘛获取的是body的总高度

经过我一番查找，发现问题所在。body.clientHeight只有在quirks mode(怪异模式)下才能返回可视高度，在strict mode(标准模式)要使用的是根节点的clientHeight，也就是 document.documentElement.clientHeight。

所谓标准模式的判定是你在HTML文件上方声明了<!DOCTYPE html>.

以下是 w3c Extensions to the Element Interface的原文:

The clientHeight attribute must run these steps:

If the element has no associated CSS layout box or if the CSS layout box is inline, return zero.

If the element is the root element and the element’s node document is not in quirks mode, or if the element is the HTML body element and
the element’s node document is in quirks mode, return the viewport
height excluding the size of a rendered scroll bar (if any).

Return the height of the padding edge excluding the height of any rendered scrollbar between the padding edge and the border edge,
ignoring any transforms that apply to the element and its ancestors.

中文翻译如下：

clientHeight属性必须运行以下步骤：

如果元素没有关联的CSS 布局框或者CSS 布局框是内联的，则返回零。

如果元素是根元素并且元素的节点文档不是quirks 模式，或者如果元素是HTMLbody元素并且元素的节点文档是quirks 模式，则返回不包括渲染滚动条大小的视口高度（如果有）。

返回填充边缘的高度，不包括填充边缘和边框边缘之间的任何渲染滚动条的高度，忽略应用于元素及其祖先的任何变换。

第2条就明确提到元素是根元素并且不是quirks mode，或者元素是body并且是quirks mode。使用clientHeight才能正确获取可视窗口的高度

参考链接：
Java Script 标准参考教程 Element.clientHeight，Element.clientWidth

mdn web docs Element.clientHeight

关于body.clientHeight，body.clientWidht获取的不是可视高度的问题相关推荐

html如何制作查看更多横条,页面浏览量顶部横条显示代码－附“Js/Jquery获取网页屏幕可见区域高度”...
偶然看到这个页面浏览量显示的东东,很有意思,自己做了一个. 代码如下:html> 页面浏览量顶部横条显示 $(function(){ $(window).scroll(function() { ...
js 和 query 获取页面和滚动条的高度
//页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollM ...
JS获取元素的大小（高度和宽度）
JS获取元素的大小(高度和宽度) 在 JavaScript中,使用下面 3 组属性可以获取元素的高度和宽度.如表所示. 元素尺寸属性说明 clientWidth 获取元素可视部分的宽度,即 CSS ...
原生js获取html元素高度,js获取页面及个元素高度、宽度的代码
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...
vue获取屏幕的实时宽度 / 高度
mounted () {const that = this;window.onresize = () => {return (() => {window.screenWidth = doc ...
table列最小宽度 vue_vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)...
mounted() { // 在mounted中监听表格scroll事件 this.$refs.scrolltable.addeventlistener( 'scroll',(event) => ...
Android 开发 Activity里获取View的宽度和高度转载
Android 开发 Activity里获取View的宽度和高度转载原文地址:https://blog.csdn.net/chenbaige/article/details/77991594 前言 ...
获取滚动条距离底部的高度
今天写移动端遇到了需求要获取滚动条距离底部的高度 var wHeight = $(document).height();var scrollHeight = wHeight - $(document) ...
[js] 获取浏览器当前页面的滚动条高度的兼容写法
[js] 获取浏览器当前页面的滚动条高度的兼容写法 document.documentElement.scrollTop || document.body.scrollTop; 个人简介我是歌谣,欢 ...
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案
微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案参考文章: (1)微信小程序获取windowHeight出现不同页面高度不一致问题及解决方案 (2)https://www. ...

关于body.clientHeight，body.clientWidht获取的不是可视高度的问题

关于body.clientHeight，body.clientWidht获取的不是可视高度的问题相关推荐

最新文章

热门文章