body是DOM对象里的body子节点，即 <body> 标签；

documentElement 是整个节点树的根节点root，即<html> 标签；

window.screen.width、window.screen.height、screen.width、screen.height分别表示显示屏幕的宽高，即屏幕的分辨率。

window.innerHeight、window.innerWidth分别表示浏览器展示页面内容可见的高度和宽度。

window.outerHeight、window.outerWidth分别表示浏览器的高度和宽度，包括收藏栏等等这些的宽度和高度。

client

document.documentElement.clientWidth：浏览器上网页可见内容的宽度。

document.documentElement.clientHeight：浏览器上网页可见内容的高度。

document.body.clientWidth：body宽度。

document.body.clientHeight：body宽度。

element.clientWidth = 左侧内边距+内容宽度+右侧内边距。

element.clientHeight = 上侧内边距+内容高度+下侧内边距。

Offset

document.documentElement.offsetWidth：表示html的宽度，不包括html的margin和border宽度。

document.documentElement.offsetHeight：表示html的高度，不包括html的margin和border宽度。

document.body.offsetWidth：表示body的宽度，不包括body的margin和border宽度。

document.body.offsetHeight：表示body的高度，不包括body的margin和border宽度。

element.offsetWidth = 左侧边框宽度+左侧内边距+内容宽度+右侧内边距+右侧边框宽度。

element.offsetHeight = 上侧边框宽度+上侧内边距+内容高度+下侧内边距+下侧边框宽度。

offsetParent　返回这个元素的父级元素

scroll

document.documentElement.scrollWidth：表示浏览器页面宽度，有滚动条是包括滚动条后面的

document.documentElement.scrollHeight：表示浏览器页面高度，有滚动条是包括滚动条后面的

document.documentElement.scrollTop：表示垂直方向滚动条滚动过的距离

document.documentElement.scrollLeft：表示水平方向滚动条滚动过的距离

if (window.pageXOffset !== undefined) {  
　　// 所有浏览器，除了 IE9 及更早版本

   alert("水平滚动距离: " + window.pageXOffset);

   alert("垂直滚动距离: " + window.pageYOffset);

} else {   
　　// IE9 及更早版本

   alert("水平滚动距离: " + document.documentElement.scrollLeft);

   alert("垂直滚动距离: " + document.documentElement.scrollTop);

}

　　

document.body.scrollWidth：当html、body没有marign、border、padding时等于 document.documentElement.scrollWidth

document.body.scrollHeight：当html、body没有marign、border、padding时等于 document.documentElement.scrollHeight

element.scrollWidth = 左侧内边距+内容宽度+右侧内边距。

element.scrollHeight = 上侧内边距+内容高度+下侧内边距。

element.scrollLeft ：当父元素宽度小于子元素宽度时，且存在滚动条时，获取父元素上的scrollLeft的滚动条滚动过的距离。

element.scrollTop ：当父元素高度小于子元素高度时，且存在滚动条时，获取父元素上的scrollTop的滚动条滚动过的距离。

 

 

 

 

 

 

 

offset、client、scroll、screen的自己理解的更多相关文章

  1. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  2. offset/client/scroll一些总结

    offset/client/scroll一些总结 1.offset 首先offset共有五个值 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidt ...

  3. js中 offset /client /scroll总结

    offset家族(只能读取,不能操作): offsetLeft:元素的边框的外边缘距离与已定位的父容器(offsetparent)的左边距离(就是子元素左边框到父元素左边框的距离). offsetTo ...

  4. js 元素offset,client , scroll 三大系列总结

    1,element.offsetWidth : 包括 padding 和 边框 2,element.clientWidth : 包括 padding ,不包含边框 , 内容超出会溢出盒子的时候,就用s ...

  5. offset client scroll

    offsetHeight offsetWidth返回为元素在屏幕上显示大小,不包括外边距 clientHeight clientWidht 和上面两个类似,不同的是,这两个不包括外边距高度. < ...

  6. bom中的offset,client,scroll

    简单明了

  7. JS 中的offset、scroll、client总结

    经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...

  8. javascript中常用坐标属性offset、scroll、client

    原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. ...

  9. python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)

    昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...

  10. client/scroll/offset width/height/top/left ---记第一篇博客

    client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth  width+左p ...

随机推荐

  1. c#并发编程经典实例文摘

    第1章 并发编程概述 1.1 并发编程简介 并发: 多线程(包括并行处理) 异步编程(异步操作)程序启动一个操作,而该操作将会在一段时间后完成 响应时编程(异步事件)可以没有一个实际的开始,可以在任何 ...

  2. 编写高质量代码改善C#程序的157个建议——建议51：具有可释放字段的类型或拥有本机资源的类型应该是可释放的

    建议51:具有可释放字段的类型或拥有本机资源的类型应该是可释放的 在建议50中,我们将C#中的类型分为:普通类型和继承了IDisposable接口的非普通类型.非普通类型除了包含那些托管资源的类型外, ...

  3. XE下创建及调用Frame

    1.创建Form1: 2.创建FMXFrame(New -> Other->Delphi Files -> FMXFrame); // 单元名为UnitFrame,窗体名为frm  ...

  4. Android 应用检查更新并下载

    1.在Android应用当中都有应用检查更新的要求,往往都是在打开应用的时候去更新下载. 实现的方法是:服务器端提供接口,接口中可以包含在最新APK下载的URL,最新APK的VersionCode,等 ...

  5. js作用域解析原理

    当代码进入到<script>标签或者在调用一个方法,那么就会进入作用域,在解析代码的时候就会做以下两件事情: ①去找var 和function关键字进行js预解析如果有var把值全部定义成 ...

  6. angular 基本依赖注入

    import { Injectable } from '@angular/core'; @Injectable() export class ProductServiceService { const ...

  7. 修改vscode caipeiyu.writeCnblog ,简化博客发布

    修改vscode caipeiyu.writeCnblog ,简化博客发布 1. 安装caipeiyu.writeCnblog vscode的博客园文章发布插件WriteCnblog : https: ...

  8. 内联函数背景、例子、与普通函数的区别及要注意的地方 ------新标准c++程序设计

    背景: 使用函数能够避免将相同代码重些多次的烦恼,还能减少可执行程序的体积,但也会带来程序运行时间上的开销.函数调用在执行时,首先在栈中为形参和局部变量分配存储空间,然后还要将实参的值复制给形参,接下 ...

  9. RDD与DataFrame

    RDD:分布式对象集合: 解决了:减少中间计算结果处理所需的开销   数据存在内存,提供一个通用的抽象的数据结构 惰性求值 DataFrame:分布式Row对象集合 服务于:SparkSQL

  10. { "result": null, "log_id": 304592860300941982, "error_msg": "image check fail", "cached": 0, "error_code": 222203, "timestamp": 1556030094 }

    这个是人脸识别时无法检测到图片报的错,有时候我们检测一张图片是否在库里面,当一张图片明显在里面,还检测不到,如下面是我的代码 package Test1; import java.io.IOExcep ...