再谈JS各种高度命令

<span style="color:#000099;"></span><h3>query中各种高度</h3> <span style="font-size:18px;">alert($(window).height());                           //浏览器当前窗口可视区域高度
 alert($(document).height());                        //浏览器当前窗口文档的高度
 alert($(document.body).height());                //浏览器当前窗口文档body的高度
 alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding margin
 alert($(window).width());                            //浏览器当前窗口可视区域宽度
 alert($(document).width());                        //浏览器当前窗口文档对象宽度
 alert($(document.body).width());                //浏览器当前窗口文档body的宽度
 alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin</span>

<h2>
</h2><h2><span style="font-size:18px;color:#333399;">javascript的各种高度</span></h2><span style="color:#3333FF;"><span style="font-size:18px;color:#000099;"> 网页可见区域宽[仅针对body]： document.body.clientWidth
 网页可见区域高[仅针对body]： document.body.clientHeight
 网页可见区域宽[仅针对body]： document.body.offsetWidth (包括滚动条和边框，若滚动条和边框为0，则和clientWidth相等)
 网页可见区域高[仅针对body]： document.body.offsetHeight (包括滚动条和边框，若滚动条和边框为0，则和clientHeight相等)
 可视窗口宽度(包括滚动轴宽度)：window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari
 可视窗口高度，不包括浏览器顶部工具栏： window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari
 网页正文全文宽(不包括滚动轴的宽度)： document.body.scrollWidth
 网页正文全文高：document.body.scrollHeight
 //假如网页中没有滚动轴，document.body.scrollWidth和window.innerWidth相等，document.body.scrollHeight
 和window.innerHeight相等。
 网页被卷去的高： document.body.scrollTop
 网页被卷去的左： document.body.scrollLeft
 网页正文部分上： window.screenTop
 网页正文部分左： window.screenLeft
 屏幕分辨率的高（整个屏幕的高度）： window.screen.height
 屏幕分辨率的宽（整个屏幕的宽度）： window.screen.width
 屏幕可用工作区高度： window.screen.availHeight
 屏幕可用工作区宽度： window.screen.availWidth
 整个浏览器可用工作区宽度： window.outerWidth</span>
</span>

1.height()：获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值（带一个参数）。

注意：

① css('height')和.height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。

② height()总是返回内容宽度,不管CSSbox-sizing属性值。.height('value')设置的容器宽度是根据CSSbox-sizing属性来定的, 将这个属性值改成border-box，将造成这个函数改变这个容器的outerHeight，而不是原来的内容高度。

2 .innerHeight()： jquery方法,为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。

注意：

① 这个方法返回元素的高度，包括顶部和底部的padding，单位是像素。

② 这个方法不适用于window and document对象，可以使用.height()代替。

3 .outerHeight()：jquery方法,获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。

注意：

① 获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。

② 在.outerHeight()计算中总是包含padding-top ,padding-bottom 和 border-top，border-bottom ；如果includeMargin参数是true，那么margin (top 和 bottom)也会被包含。