`
YongJie
  • 浏览: 73724 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

关于clientHeight、offsetHeight、scrollHeight

    博客分类:
  • CSS
阅读更多

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

 

四种浏览器[IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)]对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。

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 则是网页内容实际高度。

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

分享到:
评论

相关推荐

    clientHeight offsetHeight scrollHeight clientWidth详解

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

    分析clientHeight、offsetHeight、scrollHeight

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

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

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

    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`通常会返回相同的值,即内容的实际高度。 在处理跨浏览器的...

    clientHeight

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

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

    ### JavaScript 中不同浏览器下的特性差异:clientHeight, offsetHeight, scrollHeight 及其他尺寸属性 在Web开发过程中,经常会遇到需要获取元素尺寸的情况,而不同的浏览器对于这些尺寸属性的实现和计算方式存在...

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

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

    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`。这些属性帮助开发者...

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

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

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

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

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

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

    html DOM 节点的各种高度属性

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

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

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

Global site tag (gtag.js) - Google Analytics