js获取元素边距和宽高
clientHeight，clientWidth
offsetHeight，offsetWidth
scrollHeight，scrollWidth
有如下图：
代码如下：
<html>
<head>
<meta charset="utf-8">
<title>测试title>
<style>
* {
margin: 0;
}
div {
width: 500px;
height: 100px;
padding: 30px;
margin: 20px;
border: 10px solid #ff0000;
background-color: #eee;
}
style>
head>
<body>
<div>
编者按：近日，中央召开了两次值得关注的重要会议：一是中共中央政治局召开会议，讨论国务院拟提请第十三届全国人民代表大会第二次会议审议的《政府工作报告》稿。
编者按：近日，中央召开了两次值得关注的重要会议：一是中共中央政治局召开会议，讨论国务院拟提请第十三届全国人民代表大会第二次会议审议的《政府工作报告》稿。
编者按：近日，中央召开了两次值得关注的重要会议：一是中共中央政治局召开会议，讨论国务院拟提请第十三届全国人民代表大会第二次会议审议的《政府工作报告》稿。
div>
<script>
var a = document.getElementsByTagName("div")[0];
console.log(a.clientHeight); //160
console.log(a.scrollHeight); //206
console.log(a.offsetHeight); //180
script>
body>
html>
上述代码结果得出：
clientHeight为160
clientHeight指的是元素内容及其填充所占据的空间大小
(样式中高度)100+(上填充)30+(下填充)30
注：clientHeight不包括边框高度
scrollHeight为206
网页内容实际高度，滚动大小，指的是包含滚动内容的元素大小（元素内容的总高度），它读取的是元素内容的高度。
offsetHeight为180
偏移量，包含元素在屏幕上所用的所有可见空间（包括所有的内边距滚动条和边框大小，不包括外边距，
(样式中高度)100+(上填充)30+(下填充)30+(上边框)10+(下边框)10
document.body，document.documentElement
documentElement 和 body 相关说明：
body是DOM对象里的body子节点，即 标签；
documentElement 是整个节点树的根节点root，即 标签；
实例：
console.log(document.body.clientHeight);//256
console.log(document.documentElement.clientHeight);//789
DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。
以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中可以写：document.body。
height，width
获取元素的宽和高
console.log(document.getElementsByTagName("div")[0].style.height);
console.log(document.getElementsByTagName("div")[0].style.width);
left，right
实例:
var a=document.getElementsByTagName("div")[0];
console.log(a.offsetLeft);
offsetLeft
offsetTop
scrollLeft
scrollTop
offsetParent
总结：
1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.
2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.
3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.
4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.
5.style.left:
定位元素与包含它的矩形左边界的偏移量
6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.
7.style:posLetf:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em
top,pixelTop,posTOp这几个类比就行了.
LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离;
clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
offsetLeft 返回对象相对于父级对象的布局或坐标的left值，就是以父级对象左上角为坐标原点，向右和向下为X、Y轴正方向的x坐标
pixelLeft 设置或返回对象相对于窗口左边的位置
scrollWidth 是对象的实际内容的宽，不包边线宽度，会随对象中内容的多少改变（内容多了可能会改变对象的实际宽度）。
clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。
offsetWidth 是对象的可见宽度，包滚动条等边线，会随窗口的显示大小改变。
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth：是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置
scrollLeft:返回和设置当前横向滚动务的坐标值
innerWidth，innerHeight
定义和用法
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
注意：使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度。
语法
Get:
window.innerWidth
window.innerHeight
设置:
window.innerWidth=pixels
window.innerHeight=pixels
实例：
console.log(window.innerHeight);//789
console.log(window.innerWidth);//861
outerWidth，outerHeight
outerHeight属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。
outerWidth属性设置或返回窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）。
注意： 使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。
语法
Get:
window.outerWidth
window.outerHeight
Set:
window.outerWidth=pixels
window.outerHeight=pixels
实例：
console.log(window.outerHeight);//900
console.log(window.outerWidth);//1440
Screen对象
Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
对象属性：
availHeight
返回屏幕的高度（不包括Windows任务栏）
availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
实例：
document.write("可用高度: " + screen.availHeight);
availWidth
返回屏幕的宽度（不包括Windows任务栏）
availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
实例：
document.write("可用宽度: " + screen.availWidth);
colorDepth
返回目标设备或缓冲器上的调色板的比特深度
colorDepth 属性返回目标设备或缓冲器上的调色板的比特深度。
document.write("颜色深度: " + screen.colorDepth);
height
返回屏幕的总高度
height 属性声明了显示浏览器的屏幕的高度，以像素计。
实例：
document.write("总高度: " + screen.height);
width
返回屏幕的总宽度
width 属性声明了显示浏览器的屏幕的宽度，以像素计。
document.write("总宽度: " + screen.width);
pixelDepth
返回屏幕的颜色分辨率（每象素的位数）
pixelDepth 属性返回显示屏幕的颜色分辨率（比特每像素）。
实例：
document.write("颜色分辨率: " + screen.pixelDepth);