zoukankan      html  css  js  c++  java
  • 浏览器高度 clientHeight 与scrollHeight offsetHeight

    获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条和底部状态栏)的方法:

    在不同浏览器都实用的 JavaScript 方案:

    var w= document.documentElement.clientWidth
          || document.body.clientWidth;
    var h= document.documentElement.clientHeight
          || document.body.clientHeight;



    scrollHeight 是网页内容高度,不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时,scrollHeight 返回 clientHeight 。

    三、浏览器兼容性

    var w=document.documentElement.scrollWidth
       || document.body.scrollWidth;
    var h=document.documentElement.scrollHeight
       || document.body.scrollHeight;

    offsetHeight和offsetWidth,获取网页内容高度和宽度(包括滚动条等边线,会随窗口的显示大小改变)。没有内容高度就为0

    一、值

    offsetHeight = clientHeight + 滚动条 + 边框。

    二、浏览器兼容性

    var w= document.documentElement.offsetWidth
        || document.body.offsetWidth;
    var h= document.documentElement.offsetHeight
        || document.body.offsetHeight;


    scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离 ,即左边灰色的内容。

    scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离 ,即上边灰色的内容。

    offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 。

    offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置 。


    把整个电脑屏分为浏览器边框和内容;
    scrollTop就是滚动条离内容的距离
    offsetTop就是内容的边框+margin的距离
    所以移动滚动条的时候scrollTop会动,而offset不会动
  • 相关阅读:
    Cypress安装使用(E2E测试框架)
    AirtestIDE详解(跨平台的UI自动化编辑器)
    Linux之自动化部署
    工作笔记 之 Python应用技术
    工作笔记 之 Linux服务搭建
    工作笔记 之 互联网实用技术
    Git全面应用
    Python-Thread(通俗易懂)
    php笔记(二)PHP类和对象之Static静态关键字
    php笔记(一)面向对象编程
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6907184.html
Copyright © 2011-2022 走看看