`
yanyanquan
  • 浏览: 448385 次
  • 性别: Icon_minigender_1
  • 来自: 江门
社区版块
存档分类
最新评论

关于scrollTop、clientHeight、offsetHeight、scrollHeight

 
阅读更多

window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

scrollTop
滚动条的高度

clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight 滚动条 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

分享到:
评论

相关推荐

    07-offsetHeight-scrollHeight-clientHeight-区别.md

    本篇文章将详细解读offsetHeight、scrollHeight、clientHeight这三个属性的概念和区别,帮助求职者和前端开发者在面试或实际工作中能更加准确地使用这些属性。 ### offsetHeight和offsetWidth属性 offsetHeight和...

    entHeight、offsetHeight 和 scrollHeight

    如果定义了DOCTYPE,如DTD XHTML 1.0 Transitional,浏览器通常会以“Standards Mode”运行,此时`clientHeight`、`offsetHeight`和`scrollHeight`通常会返回相同的值,即内容的实际高度。 在处理跨浏览器的...

    JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记

    clientHeight,只读 clientHeight可以用公式 CSS height + CSS padding – 水平滚动条的高度 (如果存在) 来计算。 如图,这样一个div,它的clientHeight为95,计算:50(height)+30(padding-top)+30(padding-bottom)...

    页面位置 top、postop、scrolltop、offsetTop、scrollHeight、offsetHeight、clientHe

    在网页开发中,准确地获取和操作页面元素的位置至关重要,这涉及到多个JavaScript和CSS属性,如`top`、`postop`、`scrollTop`、`offsetTop`、`scrollHeight`、`offsetHeight`和`clientHeight`。这些属性帮助开发者...

    详解HTML元素的height、offsetHeight、clientHeight、scrollTop等梳理

    尺寸相关:offsetHeight、clientHeight、scrollHeight; 偏移相关:offsetTop、clientTop、scrollTop、pageYOffset、scrollY; 获取相对视口位置:Element.getBoundingClientRect(); 获取元素的style对象:...

    Js中关于top、clientTop、scrollTop、offsetTop.pdf

    Js 中关于 top、clientTop、scrollTop、offsetTop 的详细知识点 在 JavaScript 中,理解 top、clientTop、scrollTop、offsetTop 等属性是非常重要的,这些属性都是用于获取或设置 HTML 元素的位置和尺寸的。下面...

    对offsetLet,offsetTop,scrollLeft,scrollTop几个方法的理解

    ### 关于`clientHeight`, `offsetHeight`, `scrollHeight`的区别 这三个属性都涉及到元素的高度信息,但它们的含义各不相同: - **`clientHeight`**: 指的是元素的可见高度,即内容区域加上内边距(padding),不...

    document.body.scrollTop用法

    - **document.body.clientHeight**: 表示网页可见区域的高度(不包含滚动条)。 - **document.body.offsetWidth**: 包含边框在内的网页可见区域宽度。 - **document.body.offsetHeight**: 包含边框在内的网页可见...

    scrollLeft,scrollTop等等详解[定义].pdf

    总结一下,`scrollLeft`、`scrollTop`、`offsetTop`、`offsetLeft`、`clientHeight`、`offsetHeight`和`scrollHeight`是Web开发中的核心属性,它们帮助开发者精确控制和响应网页元素的滚动和布局,是构建交互性更强...

    Js中 关于top、clientTop、scrollTop、offsetTop等

    此时,我们可以使用`offsetHeight`和`offsetWidth`来获取容器的完整尺寸,而使用`clientHeight`和`clientWidth`来获取容器的实际可视区域大小。同时,通过`scrollHeight`和`scrollWidth`我们可以知道容器中所有内容...

    原生js scrollbars滚动条插件设置浏览器竖直滚动条美化

    scrollbarThumb.style.top = `${scrollTop / (scrollHeight - clientHeight)} * 100%`; }); }); } // 初始化滚动条插件 customScrollbar(); ``` 这个JavaScript插件会查找带有`data-scrollbar`属性的元素,并为...

    js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版

    与`offsetHeight`类似,`clientHeight`返回元素的可视内容区域的高度,即不包括边框和滚动条的部分。它通常用于确定元素可显示内容的垂直尺寸。 6. `scrollHeight` `scrollHeight`属性表示元素的总高度,即使这部分...

    html DOM 节点的各种高度属性

    如果元素没有滚动条,`scrollHeight`通常等于`clientHeight`。 4. `borderTopWidth`和`borderBottomWidth` 这两个属性分别提供了元素顶部和底部边框的宽度。当计算元素总高度时,需要将这两个值加到`clientHeight`...

    doctype后如何获得body.clientHeight的方法

    在ie6中很多js脚本执行就会出现问题,一般是在获取clientWidth, clientHeight,offsetWidth, offsetHeight,scrollWidth, scrollHeight,scrollTop, scrollLeft会返回不正确的值。 因为在加了doctype后,在ie6中...

    获取页面元素实际宽高的属性的使用

    本文将详细介绍`clientWidth`、`clientHeight`、`scrollWidth`、`scrollHeight`、`offsetWidth`、`offsetHeight`等属性及其应用场景。 #### `clientWidth` 和 `clientHeight` - **定义**:`clientWidth`用于获取...

Global site tag (gtag.js) - Google Analytics