一、JS中宽和高
一、Window和Document的区别
1.Window对象
Window 对象表示浏览器中打开的窗口
Window对象可以省略
如：alert()==window.alert()
2.Document对象
Document对象是Window对象的一部分
document.body==window.document.body
浏览器的HTML文档称为Document对象
二、window.location和document.location
1.window.location
window对象的location属性引用的是Location对象，表示该窗口中当前显示文档的URL。
2.document.location
document对象的location属性也是引用了Location对象
window.location === document.location //true
location.herf === window.location.href === document.location.href ===window.document.location.href
三、与window相关的宽和高
1.浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法
1.1、对于IE9+、Chrome、Firefox、Opera以及Safari:
window.innerHeight：浏览器窗口的内部高度
window.innerWidth：浏览器窗口的内部宽度
1.2、对于IE8、7、6、5的兼容
document.documentElement.clientHeight：表示HTML文档所在窗口的当前高度
document.documentElement.clientWidth：表示HTML文档所在窗口的当前宽度
或者
Document对象的body属性对应HTML文档的<body>标签
document.body.clientHeight
document.body.clientWidth
在不同浏览器都实用的JavaScript方案，兼容性写法：
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
2.window.screen
注：screen要小写
window.screen对象包含有关用户屏幕的信息。
window.screen.height：整个屏幕的高度
window.screen.width：整个屏幕的宽度
window.screen.availHeight：可利用的高度
window.screen.availWidth：可利用的宽度
window.screenTop：浏览器距屏幕顶部的距离
window.screenLeft：浏览器距屏幕最左侧的宽度
三、与document相关的宽高介绍
1.与client相关的宽高
document.body.clientWidth,document.body.clientHeight,document.body.clientLeft,document.body.clientTop：
clientWidth和clientHeight：
元素可视部分宽度和高度，即padding+content；如果没有滚动条，即元素设定的高度和宽度；如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来的宽高减去滚动条的宽高。
总结：
1.1无padding无滚动轴
clientWidth = style.width
1.2有padding无滚动轴
clientWidth = style.width + style.padding*2
1.3有padding有滚动轴，且滚动轴是显示的
clientWidth = style.width + style.padding*2 - 滚动轴宽度
clientLeft和clientTop：
返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，它的值就是0
总结：
这一对属性是用来读取元素的border的宽度和高度的
clientTop = border-top的border-width
clientLeft = border-left的border-width
2.与offset相关的宽高
document.body.offsetWidth,document.body.offsetHeight,document.body.offsetLeft,document.body.offsetTop
offsetWidth和offsetHeight:
这一对属性指的是元素的border+padding+content的宽度和高度，该属性和其内部的内容是否超出元素的大小无关，只和本来设定的border以及width和height有关
总结：
2.1假如无padding无滚动无border
offsetWidth = clientWidth = style.width
2.2假如有padding无滚动有border
offsetWidth = style.width + style.padding*2 + (border-width)*2;
offsetWidth = clientWidth + border宽度*2
2.3假如有padding有滚动条，且滚动条是显示的，有border
offsetWidth = style.width + style.padding*2 + (border-width)*2
offsetWidth = clientWidth + 滚动条宽度 + border宽度*2
offsetLeft和offsetTop:
offsetParent
1.如果当前的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为body
2.如果当前的父级元素有CSS定位（position为absolute或relative）,offsetParent取最近的那个父级元素
兼容性问题：
在IE6/7中：
offsetLeft = (offsetParent的padding-left) + (当前元素的margin-left)
在IE8/9/10及Chrome中
offsetLeft = (offsetParent的margin-left) + (offsetParent的border宽度）+（offsetParent的padding-left）+（当前元素的margin-left）
在FireFox中
offsetLeft = (offsetParent的margin-left)+（offsetParent的padding-left）+（当前元素的margin-left）
3.与scroll相关的宽高
document.body.scrollWidth,document.body.scrollHeight,document.body.scrollLeft,document.body.scrollTop
scrollWidth和scrollHeight
document.body的scrollWidth和scrollHeight与div的scrollWidth和scrollHeight是有区别的。
在document.body的scrollWidth和scrollHeight
3.1 给定的宽高小于浏览器窗口
scrollWidth通常是浏览器窗口的宽度
scrollHeight通常是浏览器窗口的高度
3.2 给定宽高大于浏览器窗口，且内容小于给定宽高
scrollWidth = 给定的宽度 + 其所有padding,margin和border
scrollHeight = 给定的高度 + 其所有的padding,margin和border
3.3 给定宽高大于浏览器窗口，且内容大于给定宽高
scrollWidth = 内容宽度 + 其所有的padding,margin和border
scrollHeight = 内容高度 + 其所有的padding,margin和border
在div中scrollWidth和scrollHeight
无滚动轴时：
scrollWidth == clientWidth =style.width + style.padding*2
有滚动轴时：
scrollWidth == 实际内容的宽度+padding*2
scrollHeight == 实际内容的高度+padding*2
scrollLeft和scrollTop
这对属性是可读写的，指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度。
4.obj.style.width和obj.style.height
对于一个dom元素，它的style属性返回的是一个对象，这个对象中的任意一个属性是可读写的，style.width等于css属性中的宽度，style.height等于css属性中的高度
四、documentElement和body
documentElement包含body,可以通过documentElement.childnodes取到body
五、document相关宽高兼容性问题
client相关宽高，各个浏览器解析都一样，当我们要获取可视区域的宽高时：
document.documentElement.clientWidth || document.body.clientWidth
offsetTop和offsetLeft兼容问题见上总结
offsetWidth和offsetHeight各个浏览器解析基本一致
六、event对象中的五种坐标
1.clientX和clientY
相对于浏览器可视区域左上角（0,0）的坐标
2.screenX和screenY
相对于设备屏幕左上角（0,0）的坐标
3.offsetX和offsetY
相对于事件源左上角（0,0）的坐标
4.pageX和pageY
相对于整个网页左上角（0,0）的坐标
5.X和Y
本来是IE属性，相对于CSS动态定位的最内层包容元素
七、各种宽高应用
1.获取可视区域高度的兼容性写法
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
2.获取元素顶部距浏览器顶部的距离
var Top = el.getBoundingClientRect().top; //可以取到负值,getBoundingClientRect()可以取到top,bottom,left,right四个值
3.获取页面卷去的高度
var scrollTop = document.body.scrollTop;
4.获取整个页面的高度
var wholeHeight = document.body.scrollHeight;
5.判断页面滚动到了底部
页面可视区域高度+页面卷去的高度>=整个页面的高度
6.判断页面滚动到了顶部
页面卷去的高度==0
7.判断div内部的内容区域滚动到了底部
var el = document.getElementById('box');
var divWholeHeight = el.scrollHeight; //div的内容的整个高度
var scrollTop = el.scrollTop; //div内容区卷去的高度
var divHeight = el.clientHeight; //div的可视区高度
scrollTop + divHeight >= divWholeHeight //滚动到了底部
scrollTop == 0 //滚动到了顶部
8.计算滚动轴的宽度
第一种方法
function getScrollBar(){
var el = document.createElement('p'),
styles = {
"100px",
height:"100px",
overflowY:"scroll"
},i,scrollBarWidth;
for(i in styles){
el.style[i]=styles[i];
}
document.body.appendChild(el);
var scrollBarWidth = el.offsetWidth - el.clientWidth;
el.remove();
return scrollBarWidth;
}
第二种方法
function getScrollBar(){
var el = document.createElement('p'),
styles = {
"100px",
height:"100px"
},i,clientWidth1,clientWidth2,scrollBarWidth;
for(i in styles){
el.style[i]=styles[i];
}
document.body.appendChild(el);
clientWidth1 = el.clientWidth;
el.style.overflowY = "scroll";
clientWidth2 = el.clientWidth;
var scrollBarWidth = clientWidth1 - clientWidth2;
el.remove();
return scrollBarWidth;
}
二、jquery中宽和高
1、.width()和.height()
1.1 content的宽和高
1.2 可读写，但window和document传值无效
对于普通元素：width(value)/width(function(){})
1.3 .width()与.css（"width"）区别
width()返回结果无单位，css("width")的结果有单位
2、.innerWidth()和.innerHeight()
2.1 content的宽和高+padding
2.2 window和document传值无效，不推荐使用
普通元素：innerWidth(value)/innerWidth(function(){})
3、.outerWidth()和.outerHeight()
3.1 .outerWidth(true):content+padding+border+margin
.outerWidth():不传参数或者参数为false，content + padding+border ,不包括margin
4、.scrollLeft()和.scrollTop()
4.1 .scrollLeft()：相对于水平滚动条左边的距离
如果元素没有被滚动，那么这个值为0。
4.2 .scrollTop()：相对于纵向滚动条上边的距离
如果元素不能被滚动，那么这个值为0。
5、.offset()和.position()
5.1 .offset()：相对于document的当前坐标值（相对于body左上角的left,top的值）
5.2 .position()：相对于offset parent的当前坐标值（相对于offset parent元素左上角的left,top的值）。
6、jquery中宽高的应用
6.1 可视区域加载
$(window).scroll(function(){
var ks_area = $(window).height(); //可视区域的高度
var scrollheight = $(window).scrollTop; //卷去的头部
var divtop = $("#box").offset().top; //元素距顶部的距离
if(ks_area + scrollheight >= divtop){
$("#box").addClass("animate");
}
})
6.2 判断滚动到头部和滚动到底部
$(window).scroll(function(){
var ks_area = $(window).height(); //可视区域的高度
var wholeHeight = $(document).height(); //整个文档的高度
var scrolltop = $(window).scrollTop(); //卷去的高度
if(ks_area + scrolltop >= wholeHeight){
alert("滚动到底部了")；
}
if(scrolltop == 0){
alert("滚动到顶部了")
}
})