注意:本文只简单的介绍了各个视图的属性和方法。如果想要知道兼容性或者更多,请至文章底部参考链接处。

本文内容分为五大部分:

  • Window视图属性

    • innerHeight 和 innerWidth
    • outerHeight 和 outerWidth
    • pageXOffset 和 pageYOffset
    • screenX 和 screenY
  • Screen视图属性
    • availWidth 和a vailHeight
    • colorDepth
    • pixelDepth
    • width 和 height
  • 文档视图(DocumentView)和元素视图(ElementView)方法
    • document.elementFromPoint()
    • element.getBoundingClientRect()⭐滑动栏滚动的时候常用
    • document.getClientRects()
    • element.scrollIntoView()
  • 元素视图属性
    • clientHeight 和 clientWidth
    • clientLeft 和 clientTop
    • offsetWidth 和 offsetHeight
    • offsetLeft 和 offsetTop
    • offsetParent
    • scrollHeight 和 scrollWidth
    • scrollLeft 和 scrollTop
    • scrollLeftMax 和 scrollTopMa
  • 鼠标位置
    • clientX 和 clientY
    • offsetX 和 offsetY
    • pageX 和 pageY
    • screenX 和 screenY
    • x 和 y

一、Window视图属性

innerHeight 属性和 innerWidth 属性:获取window浏览器内部大小,也就是视口(viewport)大小

outerHeight 属性和 outerWidth 属性:表示整个浏览器窗体的大小

pageXOffset 属性和 pageYOffset 属性:表示整个页面滚动的像素值(水平方向的和垂直方向的)

screenX 属性和 screenY 属性:浏览器窗口在显示器中的位置,screenX表示水平位置,screenY表示垂直位置

如下图所示,红色部分为览器窗口,绿色部分为浏览器的视口(viewport)

二、Screen视图属性

availWidthavailHeight:显示器可用宽高,不包括任务栏之类的东西

colorDepth:显示器的颜色深度

pixelDepth:该属性基本上与colorDepth一样

widthheight:表示显示器屏幕的宽高。

三、文档视图(DocumentView)和元素视图(ElementView)方法

document.elementFromPoint():返回给定坐标处所在的元素。

element.getBoundingClientRect():返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height,大小都是相对于文档视图左上角计算而来。

document.getClientRects():返回元素的数个矩形区域,返回的结果是个对象列表,具有数组特性。

element.scrollIntoView():让元素滚动到可视区域(不属于草案方法)

element.getBoundingClientRect()详解

返回元素的大小及其相对于视口的位置。

当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的)。如果你需要获得相对于整个网页左上角定位的属性值,那么只要给top、left属性值加上当前的滚动位置(通过 window.scrollX 和 window.scrollY),这样就可以获取与当前的滚动位置无关的值。

四、元素视图属性

clientWidthclientHeight:内容区域的高度和宽度,包括padding大小,但是不包括边框和滚动条

clientLeftclientTop:内容区域的左上角相对于整个元素左上角的位置(包括边框)

offsetWidthoffsetHeight:整个元素的尺寸(包括边框)

offsetLeftoffsetTop:表示相对于最近的祖先定位元素(CSS position 属性不是static 的元素)的左右偏移值。

offsetParent:第一个祖定位元素(即用来计算上面的offsetLeft和offsetTop的元素)

scrollWidthscrollHeight:表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候,scrollHeight应该等用于scrollTop + clientHeight。

scrollLeftscrollTop:表示元素滚动的像素大小。可读可写。

未脱离文档流:offsetLeft:父级元素margin+父级元素padding+父级元素border+自己margin

脱离文档流:offsetLeft:和父级元素没关系

style.width仅能返回以style方式定义的内部样式表的width属性值。

clientWidth 和 clientHeight属性会将获取的值四舍五入取整数。 如果你需要小数结果, 请使用 element.getBoundingClientRect()

又因为使用element.getBoundingClientRect()只能获取元素的width / height,但是这个值是 offsetWidth / offsetHeight ,包括边框的长度,所以不能获取clientWidth / clientHeight

五、鼠标位置

clientXclientY:相对于window,为鼠标相对于window的偏移。在iphone上,这对值返回的位置就等同于下面要提到的pageX/Y

offsetXoffsetY:表示鼠标相对于当前被点击元素padding box的左上偏移值

pageXpageY:为鼠标相对于document的坐标

screenXscreenY:鼠标相对于显示器屏幕的偏移坐标。

xy:相当于clientX/clientY。

参考资料

MDN Window对象

MDN Element对象

MDN HTMLElement

张鑫旭-CSSOM视图模式(CSSOM View Module)相关整理

javascript - 所有的视图属性和方法(offsetHeight、clientHeight、scrollHeight、innerHeight等)的更多相关文章

  1. [DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释

    由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动 ...

  2. Javascript常用对象的属性和方法

    javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算 ...

  3. JavaScript 节点操作Dom属性和方法(转)

    JavaScript 节点操作Dom属性和方法   一些常用的dom属性和方法,列出来作为手册用. 属性:   1.Attributes 存储节点的属性列表(只读)   2.childNodes 存储 ...

  4. 【JavaScript】浅析JavaScript对象如何添加属性和方法

    向JavaScript类中添加属性和方法,最直观的做法就是在类中定义属性和方法.JavaScript是一门弱语言,除了直接定义还可以用prototype来添加. 下面介绍从外部向JavaScript添 ...

  5. JavaScript中Number常用属性和方法

    title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...

  6. javaScript在私有的属性和方法

    javaScript并没有什么特别的语法来代表私人.保.或公共的属性和方法,在这一点上与 java或其他语言是不同的.JavaScript大家是共同的所有对象: var myobj={ mypop:1 ...

  7. javascript数组的实例属性(方法)

    javascript的所有数组实例对象,除了可以给自己增删属性之外:都会从Array.prototype继承属性(方法).修改Array的原型会影响所有的数组实例. 数组实例的属性: Array.pr ...

  8. JavaScript访问对象的属性和方法

    对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性. 二者区别:“ . ”表示法一般作为静态对象使用时来存取属性.而“[ ...

  9. JavaScript 公有 私有 静态属性和方法

    1.公有属性和公有方法 这里的 name  age  都是参数传递进去 可以在外面直接实例化调用. 2.私有属性和方法 私有的只能在函数内部使用 作用域的原因 3.静态属性和静态方法 这里我首先 创建 ...

随机推荐

  1. annaconda的安装及使用

    一.安装 1.安装包下载: 方式1:官网:https://www.anaconda.com/distribution/ 方式2:清华镜像源:https://mirrors.tuna.tsinghua. ...

  2. 数据结构和算法:Python实现二分查找(Binary_search)

    在一个列表当中我们可以进行线性查找也可以进行二分查找,即通过不同的方法找到我们想要的数字,线性查找即按照数字从列表里一个一个从左向右查找,找到之后程序停下.而二分查找的效率往往会比线性查找更高. 一. ...

  3. vmware导入ova文件踩坑记

    问题来源 众所周知,所有的网络行为都会产生相应的网络流量,那么所有的网络攻击行为也有其对应的流量特点,那么是否能根据流量特点进而分析出其对应的是什么攻击行为呢? 我在虚拟机上使用vulnhub的靶场环 ...

  4. 小白学 Python 数据分析(20):pyecharts 概述

    人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Pandas (一)概述 小白学 Python 数据分析(3):P ...

  5. Journal of Proteomics Research | 自动的、可重复的免疫多肽数据分析流程MHCquant

    题目:MHCquant: Automated and reproducible data analysis for immunopeptidomics 期刊:Journal of Proteome R ...

  6. 2000字读懂Java的来源

    title: Java的来源 blog: CSDN data: Java学习路线及视频 1.Java市场 截至2020-03: Java的市场份额为17.78% 2. Java语言简介 是SUN(St ...

  7. Cisco 综合配置(三)

    要求: 1.PC1 PC2使用DHCP,获取IP ,VLAN为10 和20,网关在Core Switch 2上2.DHCP和web server VLAN为100,网关在Core Switch 1上3 ...

  8. hdu3367最大伪森林(并查集)

    题目链接:http://icpc.njust.edu.cn/Problem/Hdu/3367/ 题目要求一个连通图的最大伪森林,伪森林是一个最多有一个回路的图.我们只要用Kruskal最大生成树的策略 ...

  9. Contest 153

    2019-09-14 23:16:25 总体感受:节奏尚可,难度尚可.然而还是卡在了最后一题,完全没有想到使用dp. 注意点: 1)Contest的最后一题往往是DP,Graph,这个敏感度需要提高: ...

  10. java获取不同时段

    当前时间: long currentime= System.currentTimeMillis(); 本周第一天0时: Long weekstart = current.withDayOfWeek(1 ...