clientWidth、offsetWidth、scrollWidth……
1、元素视图属性
clientWidth：元素内容可视区宽度（水平方向 width + 左右 padding）。
clientHeight：元素内容可视高度（垂直方向 height + 上下padding）。
offsetWidth：元素实际宽度（水平方向 width + 左右 padding + 左右 border-width）。
offsetHeight：元素实际高度（垂直方向 height + 上下 padding + 上下 border-width）。
scrollWidth：元素内容实际宽度，内容不超过盒子宽度时为盒子的 clientWidth（图1 A、B、C）。
scrollHeight：元素内容真实高度，内容不超过盒子高度为盒子的 clientHeight。
scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。
scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离，或当元素内容高度超过元素本身高度时，scrollTop 指的是元素内容超出元素上边界的那部分高度。
clientLeft：元素 border-left 的 width，也可以视为 ( offsetWidth - clientWidth ) / 2。
clientTop：元素 border-top 的width ，也可视为（offsetHeight - clientHeight）/ 2。
offsetLeft：元素到 offsetParent 左侧距离（不包括父元素的 border 值，如图三）。
offsetTop：元素到 offsetParent 顶部距离。
offsetParent：距离元素最近的一个具有定位的父级元素（relative，absolute，fixed），如果父级元素都不是定位元素，offsetParent 为浏览器窗口最边边（大部分资料说 body，但如图测试 offsetLeft 却包含 html 的 border-left 宽）。
如图二，火狐浏览器的 offsetLeft 不包含 body 的 border-left 值，其余部分浏览器包含。
2、window 视图属性，（于分辨率1920 * 1080下F11全屏放大屏幕所测，包含滚动条）
innerWidth：浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具类）【1920px】
innerHeight：浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具类）【1080px】
3、document 文档视图
document.documentElement.clientWidth：浏览器窗口可视区宽度（不包含浏览器控制台、菜单栏、工具栏、滚动条）。
document.documentElement.clientHeight：浏览器窗口可视区高度（不包含浏览器控制台、菜单栏、工具栏、滚动条）。
document.documentElement.offsetWidth：获取DOM文档根节点 html 元素对象的宽度，即offsetWidth = width + padding +border，不包括margin。
document.documentElement.offsetHeight：获取DOM文档根节点 html 元素对象的高度，即offsetHeight = height + padding + border，不包括margin（包括 body 的 margin）。
document.documentElement.scrollWidth：获取 html 元素对象内容的实际宽度，即 html 元素对象的滚动宽度。
document.documentElement.scrollHeight：获取 html 元素对象内容的实际高度，即 html 元素对象的滚动高度。
document.documentElement.clientLeft：获取 html 元素对象左边框宽度。
document.documentElement.clientTop：获取 html 元素对象上边框宽度。
document.documentElement.scrollLeft：返回文档滚动 left 方向距离（当窗口发生滚动时值改变）。
document.documentElement.scrollTop：返回文档滚动 top 方向距离（当窗口发生滚动时值改变）。
document.documentElement.offsetLeft：设置或获取页面文档向右滚动或的像素数。
document.documentElement.offsetTop：设置或获取页面文档向下滚动过的像素数。
document.body.offsetHeight：获取整个文档高度（不包含 body 的 margin ）。
scrollHeight：元素内容的高度
对于 #parent 元素来说，其元素内容就是#child元素的高度，因为#child设置overflow:hidden，所以，#paren 的 scrolllHeight 为300；
对于 #child 元素来说，其元素内容就是 01<br/> ~ 20<br/>，其中一行高度是21，故 #child 的 scrollHeight为 420
scrollTop：当元素内容高度超过元素本身高度时，scrollTop 指的是元素内容超出元素上边界的那部分高度。
设 parent.scrollTop = 21时，相当于 #child 往下滚动，顶部内容距离 #parent 21数值，此时 #child的内容从02显示。
设 child.scrollTop = 42时， 相当于 #child 的内容往下滚动显示，部分内容距离 #child顶部 42数值，02、03往上移，故04开始显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#parent {
position: relative;
overflow: auto;
width: 100px;
height: 100px;
background: #f1a899;
} #child {
position: relative;
overflow: hidden;
width: 50px;
height: 300px;
background: #84b3fd;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
01<br/>
02<br/>
03<br/>
04<br/>
05<br/>
06<br/>
07<br/>
08<br/>
09<br/>
10<br/>
11<br/>
12<br/>
13<br/>
14<br/>
15<br/>
16<br/>
17<br/>
18<br/>
19<br/>
20<br/>
</div>
</div>
<script>
var parent = document.getElementById("parent");
parent.scrollTop = 21;
console.log("parent.scrollHeight: " + parent.scrollHeight); // 300
console.log("parent.scrollTop: " + parent.scrollTop); // 21 设置 parent.scrollTop = 21，此时 #迟不设置则为 0
console.log("parent.offsetHeight: " + parent.offsetHeight); // 100 console.log("---------------------------"); var child = document.getElementById("child");
child.scrollTop = 42;
console.log("child.scrollHeight: " + child.scrollHeight); // 420
console.log("child.scrollTop: " + child.scrollTop); // 42 设置 child.scrollTop = 42，不设则为 0
console.log("child.offsetTop: " + child.offsetTop); // 0
</script>
</body>
</html>
clientWidth、offsetWidth、scrollWidth……的更多相关文章
- 四种浏览器对 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解释差异
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...
- clientWidth、clientHeight、offsetWidth、offsetHeight以及scrollWidth、scrollHeight
clientWidth.clientHeight.offsetWidth.offsetHeight以及scrollWidth.scrollHeight是几个困惑了好久的元素属性,趁着有时间整理一下 1 ...
- JavaScript属性中的offsetLeft、offsetWidth、clientWidth、scrollLeft、scrollWidth、innerWidth
1.offsetLeft和offsetTop 只读属性,返回当前元素与父辈元素之间的距离(不包括边框).其中父辈元素的取法是有门道的: (1).若父辈元素中有定位的元素,那么就返回距离当前元素最近的定 ...
- JS：body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条. document.body.clie ...
- scrollWidth、clientWidth、offsetWidth、width的区别
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变. off ...
- clientTop、clientWidth、offsetTop、offsetWidth、scrollTop
<div id="drag" class="drag">drag me</div> <script type="text ...
- 理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
一.clientX和clientY 事件发生时,鼠标距离浏览器的可视区域的X.Y轴的位置,不包含滚动条的区域的部分.就算是页面进行了滚动,鼠标的坐标值还是参考可视区域的. 二.offsetLeft和o ...
- offsetParent、offsetTop、offsetLeft、offsetWidth、offsetHeight
w3c规范,请戳这里:http://www.w3.org/TR/cssom-view/#dom-htmlelement-offsetparent 一.offsetParent 英文解读: part o ...
随机推荐
- 读懂jstack
1 jstack jstack是JDK自带的一种线程栈跟踪工具,用于生成java虚拟机当前时刻线程快照.在定位线程卡顿.死锁.block等原因的时候非常有用.使用方法是: jstack [-l] pi ...
- JRE、JDK、JVM 及 JIT 之间有什么不同？
JRE 代表 Java 运行时(Java run-time),是运行 Java 引用所必须的.JDK 代 表 Java 开发工具(Java development kit),是 Java 程序的开发工 ...
- Zookeeper 的 java 客户端都有哪些？
java 客户端:zk 自带的 zkclient 及 Apache 开源的 Curator.
- Mybatis 开发 dao 的方法
1.分析SqlSession使用范围 1.1.SqlSessionFactoryBuilder 通过 SqlSessionFactoryBuilder 创建会话工厂 SqlSessionFactory ...
- 学习GlusterFS（八）
GlusterFS集群创建 一.简介 GlusterFS概述 Glusterfs是一个开源的分布式文件系统,是Scale存储的核心,能够处理千数量级的客户端.在传统的解决 方案中Glusterfs能够 ...
- 学习Kvm（二）
一.走进云计算 云计算:云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问, 进入可配置的计算资源共享池(资源包括网络,服务器,存储,应用软件,服务),这些资源能够被快速提供, ...
- Java_lambda表达式之"stream流学习,Map学习,collect学习,Conllectors工具类学习"
Lambda表达式学习 对List<Integer> userIdList = UserList.stream().map(User::getUserId).collect(Collect ...
- python学习笔记（二）——程序结构
1. 选择结构: if 语句:单分支.双分支.多分支 **单分支结构** if 条件表达式: 语句块 **双分支结构** if 条件表达式: 语句块 else: 语句块 **多分支结构** if 条件 ...
- carsim2016事件如何设置
#carsim2016事件设置# 完成以下功能:车速低于60km/h时,加速,设置节气门开度为0.8,制动主斜体样式缸压力设为0:车速高于120km/h时,制动,设置节气门开度为0,制动主缸压力设置为 ...
- 「入门篇」初识JVM (下下) - GC
垃圾收集主要是针对堆和方法区进行:程序计数器.虚拟机栈和本地方法栈这三个区域属于线程私有的,只存在于> 线程的生命周期内,线程结束之后也会消失,因此不需要对这三个区域进行垃圾回收. GC - J ...