• js中不同的高度(height)对比


    js中不同的高度(height)对比
     
     
     

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

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

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

    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 的解释与上面相同,只是把高度换成宽度即可。

    重要说明

    以上是在没有指定 DOCTYPE 的情况下如果指定了 DOCTYPE,比如:DTD XHTML 1.0 Transitional,则意义又会不同,在这种情况下这三个值都是同一个值都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。如果要在指定的 DOCTYPE 下按上述意义来应用,怎么办呢?答案是:将 document.body 和 document.documentElement 一起应用,比如:document.documentElement.scrollLeft || document.body.scrollLeft(一般将 document.documentElement 写在前面),类似应用请参见:http://www.cnblogs.com/wang726zq/archive/2012/05/10/2494256.html


        var height = document.documentElement.clientHeight;//可见区域高度

  • 相关阅读:
    ubuntu远程windows桌面
    spring boot 给返回值加状态 BaseData
    spring boot 拦截异常 统一处理
    IntelliJ IDEA spring boot 远程Ddbug调试
    IntelliJ IDEA 常用插件
    spring boot 请求地址带有.json 兼容处理
    spring boot 接口返回值去掉为null的字段
    spring boot 集成disconf
    Spring boot 自定义拦截器
    Linux下安装MySQL
  • 原文地址:https://www.cnblogs.com/wang726zq/p/height.html
Copyright © 2020-2023  润新知