javascript - 所有的视图属性和方法(offsetHeight、clientHeight、scrollHeight、innerHeight等)
注意:本文只简单的介绍了各个视图的属性和方法。如果想要知道兼容性或者更多,请至文章底部参考链接处。
本文内容分为五大部分:
- 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视图属性
availWidth
和 availHeight
:显示器可用宽高,不包括任务栏之类的东西
colorDepth
:显示器的颜色深度
pixelDepth
:该属性基本上与colorDepth一样
width
和 height
:表示显示器屏幕的宽高。
三、文档视图(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),这样就可以获取与当前的滚动位置无关的值。
四、元素视图属性
⭐clientWidth
和 clientHeight
:内容区域的高度和宽度,包括padding大小,但是不包括边框和滚动条
⭐clientLeft
和 clientTop
:内容区域的左上角相对于整个元素左上角的位置(包括边框)
⭐offsetWidth
和 offsetHeight
:整个元素的尺寸(包括边框)
⭐offsetLeft
和 offsetTop
:表示相对于最近的祖先定位元素(CSS position 属性不是static 的元素)的左右偏移值。
offsetParent
:第一个祖定位元素(即用来计算上面的offsetLeft和offsetTop的元素)
scrollWidth
和 scrollHeight
:表示整个内容区域的宽高,包括隐藏的部分。如果元素没有隐藏的部分,则相关的值应该等用于clientWidth和clientHeight。当你向下滚动滚动条的时候,scrollHeight应该等用于scrollTop + clientHeight。
⭐scrollLeft
和 scrollTop
:表示元素滚动的像素大小。可读可写。
未脱离文档流:offsetLeft:父级元素margin+父级元素padding+父级元素border+自己margin
脱离文档流:offsetLeft:和父级元素没关系
style.width仅能返回以style方式定义的内部样式表的width属性值。
clientWidth 和 clientHeight属性会将获取的值四舍五入取整数。 如果你需要小数结果, 请使用 element.getBoundingClientRect()
又因为使用element.getBoundingClientRect()只能获取元素的width / height,但是这个值是 offsetWidth / offsetHeight ,包括边框的长度,所以不能获取clientWidth / clientHeight
五、鼠标位置
clientX
和 clientY
:相对于window,为鼠标相对于window的偏移。在iphone上,这对值返回的位置就等同于下面要提到的pageX/Y
offsetX
和 offsetY
:表示鼠标相对于当前被点击元素padding box的左上偏移值
pageX
和 pageY
:为鼠标相对于document的坐标
screenX
和 screenY
:鼠标相对于显示器屏幕的偏移坐标。
x
和 y
:相当于clientX/clientY。
参考资料
张鑫旭-CSSOM视图模式(CSSOM View Module)相关整理
javascript - 所有的视图属性和方法(offsetHeight、clientHeight、scrollHeight、innerHeight等)的更多相关文章
- [DOM基础]offsetHeight,clientHeight,scrollHeight,innerHeight,outerHeight等属性的解释
由于经常搞混这几个属性,所以查找资料总结一下,方便以后翻出来温习. 一.偏移量-以offset开头的 1.offsetHeight:元素在垂直方向上占用的空间大小,像素.包括元素的高度.可见的水平滚动 ...
- Javascript常用对象的属性和方法
javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算 ...
- JavaScript 节点操作Dom属性和方法(转)
JavaScript 节点操作Dom属性和方法 一些常用的dom属性和方法,列出来作为手册用. 属性: 1.Attributes 存储节点的属性列表(只读) 2.childNodes 存储 ...
- 【JavaScript】浅析JavaScript对象如何添加属性和方法
向JavaScript类中添加属性和方法,最直观的做法就是在类中定义属性和方法.JavaScript是一门弱语言,除了直接定义还可以用prototype来添加. 下面介绍从外部向JavaScript添 ...
- JavaScript中Number常用属性和方法
title: JavaScript中Number常用属性和方法 toc: false date: 2018-10-13 12:31:42 Number.MAX_VALUE--1.79769313486 ...
- javaScript在私有的属性和方法
javaScript并没有什么特别的语法来代表私人.保.或公共的属性和方法,在这一点上与 java或其他语言是不同的.JavaScript大家是共同的所有对象: var myobj={ mypop:1 ...
- javascript数组的实例属性(方法)
javascript的所有数组实例对象,除了可以给自己增删属性之外:都会从Array.prototype继承属性(方法).修改Array的原型会影响所有的数组实例. 数组实例的属性: Array.pr ...
- JavaScript访问对象的属性和方法
对象的属性和方法统称为对象的成员. 访问对象的属性 在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性. 二者区别:“ . ”表示法一般作为静态对象使用时来存取属性.而“[ ...
- JavaScript 公有 私有 静态属性和方法
1.公有属性和公有方法 这里的 name age 都是参数传递进去 可以在外面直接实例化调用. 2.私有属性和方法 私有的只能在函数内部使用 作用域的原因 3.静态属性和静态方法 这里我首先 创建 ...
随机推荐
- Xamarine ContentPage.ToolbarItems 未显示/不显示在界面
将页面封装到NavigationPage中.在App.xaml.cs的构造函数中 将 MainPage = new MainPage(); 替换为 MainPage = new NavigationP ...
- 奇思妙想-java实现另类的pipeline模式
磕叨 在公司做项目是见到前辈们写的一端任务链的代码,大概如下 Runnable task = new TaskA(new TaskB(new TaskC(new taskD()))); task.ru ...
- nested exception is java.lang.StackOverflowError解析
背景介绍: 项目是微服务的,使用docker容器,使用jenkins部署.测试环境有个公共服务一直以来都能正常发布,突然有一天不行了,经常发布失败,然后多发布几次就好了. 报错如下: 是栈溢出了,一般 ...
- 图解I/O模型
本文带你鸟瞰I/O模型全貌,希望可以让你对I/O模型有一个直观的认识 什么是I/O?I/O的过程?同步阻塞 I/O同步非阻塞 I/OI/O多路复用异步I/O 什么是I/O? I/O就是计算机内 ...
- 强连通分量SCC 2-SAT
强连通分量SCC 2-SAT 部分资料来自: 1.https://blog.csdn.net/whereisherofrom/article/details/79417926 2.https://ba ...
- 机器学习 - 命名实体识别之Hidden Markov Modelling
概述 命名实体识别在NLP的应用中也是非常广泛的,尤其是是information extraction的领域.Named Entity Recognition(NER) 的应用中,最常用的一种算法模型 ...
- tcp\udp 操作系统发展史
目录 为什么会出现粘包现象 socket发送大文件示例 UDP协议 基于UDP实现简易版本的qq 总结: SocketServer模块介绍(让tcp也能支持并发) 为什么会出现粘包现象 TCP 三次握 ...
- ASP.NET Core AutoWrapper 自定义响应输出
前言 AutoWrapper是一个简单可自定义全局异常处理程序和ASP.NET Core API响应的包装.他使用ASP.NET Core middleware拦截传入的HTTP请求,并将最后的结果使 ...
- ssm整合配置文件
web.xml: <!-- 指定spring的配置文件的路径和名称 --> <context-param> <param-name>contextConfigLoc ...
- 单元测试实践思考(junit5+jmockit+testcontainer)
目录 背景 方案设计 单元测试指导思想 单层隔离 内部穿透 技术实现 依赖管理 基础架构 封装Junit5&Jmockit 单元测试配置 TestContainer封装 官方方案 实际方案 完 ...