`

clientHeight、offsetHeight 和 scrollHeight

阅读更多

转自:http://www.cftea.com/c/751.asp

 

个人理解:一般网页都有DOCTYPE,意味着这几种都是网页内容的实际高度了

 

兼容性,特别是这几个东西的兼容性是很复杂的,为了简单,建议阅读再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth  这篇文章。

我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释,这里说的是 document.body,如果是 HTML 控件,则又有不同,点击这里 查看。

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

文尾的重要说明比较重要,请注意。

看了评论,不少朋友,对我的描述还是很疑惑,所以我做了下面这个图,来帮助理解。

clientHeight、offsetHeight 和 scrollHeight

从图中,我们可以看到一个浏览器窗口,窗口被我故意拖小了,这样形成了滚动条,所以网页上端的内容就隐藏在了窗口上面,网页下端的内容就隐藏在了窗口下面。

clientHeight、offsetHeight 和 scrollHeight 大致可以这样解释(详细内容请仔细阅读后面的内容):

  • clientHeight 图中那块白的的高度。
  • offsetHeight、scrollHeight 图中白的+上阴影部分+下阴影部分,也就是网页内容高度。
  • 顺便提一下,那个上阴影部分,就是 scrollTop。

clientHeight

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

offsetHeight

  • IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
  • NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,offsetHeight 返回网页内容实际高度。

scrollHeight

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

测试一下

测试文件

简单地说

clientHeight 就是透过浏览器看内容的这个区域高度。

NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

同理

clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

重要说明

以上是在没有指定 DOCTYPE 的情况下,如果指定了 DOCTYPE 为 XHTML ,比如:DTD XHTML 1.0 Transitional,则意义又会不同,在这种情况下这三个值都是同一个值,都表示内容的实际高度(并不在乎窗口有多高)。

再说明一下,写这篇文章时,Chrome 浏览器还没有出来,后来我测试了一下 Chrome 在 指定了 DOCTYPE 为 XHTML 时的情况,真 BT,它的 clientHeight 和 offsetHeight 值相同,都表示内容的实际高度(并不在乎窗口有多高),scrollHeight 又是另外一套不知道什么玩意儿,总之这点它和 IE、Firefox 不同就是了。 

好,回过来,如果要在指定的 DOCTYPE 为 XHTML 的情况下,要按文章开头的解释(即 clientHeight、offsetHeight、scrollHeight 意义不同)来应用,怎么办呢?答案是:将 document.body 和 document.documentElement 一起应用,比如:document.documentElement.scrollLeft || document.body.scrollLeft(一般将 document.documentElement 写在前面),类似应用请参见:http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp

分享到:
评论

相关推荐

    clientHeight offsetHeight scrollHeight clientWidth详解

    在探讨`clientHeight`, `offsetHeight`, `scrollHeight`, `clientWidth`, `offsetWidth`, 和 `scrollWidth`这些概念之前,我们首先需要理解它们在Web开发中的重要性。这些属性帮助开发者了解和控制网页在不同浏览器...

    clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

    clientHeight,offsetHeight,scrollHeight,offsetParent和parentElement,offsetLeft.

    分析clientHeight、offsetHeight、scrollHeight

    在网页开发中,理解和使用`clientHeight`、`offsetHeight`和`scrollHeight`这三个属性是至关重要的。它们都是JavaScript中用于获取元素尺寸的方法,但各有其特定的用途和应用场景。 首先,`clientHeight`属性返回一...

    entHeight、offsetHeight 和 scrollHeight

    在JavaScript中,`...总的来说,理解和掌握`clientHeight`、`offsetHeight`和`scrollHeight`的差异是进行JavaScript页面交互和布局优化的基础,它们提供了对网页内容可视部分、总尺寸以及可滚动部分的精确控制。

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

    总结来说,offsetHeight和offsetWidth关注的是元素的边界,而clientHeight和clientWidth关注的是元素内容的大小,scrollHeight和scrollWidth关注的是元素内容的实际大小。理解这些概念,对于编写符合布局需求的CSS...

    clientHeight

    ### 四种浏览器对_clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和_scrollWidth 的解析 在前端开发过程中,我们经常会遇到需要获取页面元素尺寸的情况,这其中包括了元素的高度(`...

    js关于不同浏览器的不同之处

    本文将详细介绍`clientHeight`, `offsetHeight`, `scrollHeight`以及与屏幕尺寸相关的`window.screen.availWidth`, `window.screen.availHeight`, `window.screen.width`, `window.screen.height`, `document.body....

    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对象:...

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

    ### 对offsetLeft,offsetTop,scrollLeft,scrollTop...在这个例子中,我们创建了一个宽度过长的`<div>`元素,并通过JavaScript输出了`clientHeight`, `offsetHeight`, `scrollHeight`等属性值,以便观察它们之间的区别。

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

    六、clientHeight、offsetHeight 和 scrollHeight 属性 clientHeight 属性用于获取 HTML 元素的可视区域的高度。offsetHeight 属性用于获取 HTML 元素的高度,包括边框和padding。scrollHeight 属性用于获取 HTML ...

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

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

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

    通过上述介绍,我们可以看到`clientWidth`、`clientHeight`、`scrollWidth`、`scrollHeight`、`offsetWidth`和`offsetHeight`等属性在前端开发中的重要性。合理使用这些属性可以帮助我们更精确地控制页面布局和元素...

    javascript获取设置div的高度和宽度兼容任何浏览器.docx

    - **现代浏览器**:`offsetHeight`, `offsetWidth`, `clientHeight`, `clientWidth`, `scrollHeight`, `scrollWidth` 均支持。 - **Internet Explorer**:除了 `clientHeight` 和 `clientWidth` 外,其他属性也均...

    html DOM 节点的各种高度属性

    例如,如果你有一个元素,其内容高度为100px,加上20px的上下内边距和10px的边框,那么`offsetHeight`将是130px。 2. `clientHeight` `clientHeight`返回元素的内容区域高度,不包括边框,但包括内边距。如果元素...

Global site tag (gtag.js) - Google Analytics