13518219792
关于js的宽高，随便一搜就是一大堆。这个一大堆对我来说可不是什么好事，看的头都大了。所以今天就总结了一些比较会常用的，并说明一下应用场景。
成都创新互联服务项目包括华容网站建设、华容网站制作、华容网页制作以及华容网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，华容网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到华容省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
先来扯一下documentElement和body的微妙关系：
documentElement===html ----->> documentElement.childNode[2]===body 【很明显，父子关系呗】
如果中没声明html，则拿不到documentElement这个值，但此时body==documentElement，这才有了下面的兼容写法.
ps:以下内容就只谈论height，width同理嘛。
js的宽高及应用：
可视区尺寸（.clientHeight）：
对document：可视区height = 整个浏览器的高 - 工具栏部分height.
兼容写法：document.documentElement.clientHeight||document.documentElement.clientHeight.
对div：可视区height = height + padding.
写法：divObj.clientHeight.
滚动距离（.scrollTop）：
对document：可视区顶部到网页顶部，即网页被卷上去的部分.
获取兼容写法：document.body.scrollTop || document.documentElement.scrollTop.
设置兼容写法：document.body.scrollTop = document.documentElement.scrollTop=...
对div：div被卷上去的部分.
获取写法：divObj.scrollTop.
设置写法：divObj.scrollTop=...
.scrollHeight:
对document： document.body.scrollHeight被视为整个网页的高。【网页内容大于clientHeight时】
获取写法：document.body.scrollHeight.
对div：没有滚动条时，scrollHeight与clientHeight属性结果相等，scrollWidth与clientWidth属性结果相等；
存在滚动条，即存在内容溢出的情况时，scroll属性大于client属性，divObj.scrollHeight包括被隐藏部分。scrollHeight可用于获取div的wholeHeight以实现滚动到底部加载。
【注意】scrollHeight属性存在兼容性问题，chrome和safari浏览器中，scrollHeight包含padding-bottom；而IE和firefox不包含padding-bottom.
.offsetHeight:
对document：
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。 NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。
对div：
divObj.offsetHeight=height+padding+border.
安利一个好东西：
.getBoundingClientRect().top/right/bottom/left; //div的各边距可视区的距离.
可视区加载：
1 function showDiv(){2 var showId=document.getElementById("showDiv");3 var clients=window.innerHeight||document.documentElement.clientHeigh||document.body.clientHeigh;4 var divTop=showId.getBoundingClientRect().top;
//判断是否出现在可视区了5 if(divTop<=clients){6 showId.classList.add('fadeInLeft');//一个带有动画的类7 }8 }
jQ的宽高及应用：
width() | height()：可读写。（length） | function（index，oldWidth）{ }
innerWidth() | innerHeight()：可读写。（length） | function（index，oldWidth）{ }
outerWidth(Boolean) | outerHeight(Boolean)：为true时包括margin，false时不包括margin.
.scrollTop() | .scrollLeft：被卷走的宽高。
.offset().top/left ：相对于document.
.position().top/left ：相对于offsetParent.
常用的属性：
$(window).height();--可视区高
$(window).scrollTop();--滚上去的部分
$(document).height();--整个文档的高
滚动到底部：
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度
var scrollHeight = $(document).height(); //当前页面的总高度
var clientHeight = $(this).height(); //当前可视的页面高度
if(scrollTop + clientHeight >= scrollHeight){ //滑动到底部 count++; //每次滑动count加1
alert("滚动底部了");
}});
