一、JS宽高计算
参考地址：http://caibaojian.com/js-name.html
-
名词解释
screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，是获取window对象的属性。
client：使用区、客户区。指的是客户区，当然是指浏览器区域。
offset：偏移。指的是目标甲相对目标乙的距离。
scroll：卷轴、卷动。指的是包含滚动条的的属性。
inner：内部。指的是内部部分，不含滚动条。
avail：可用的。可用区域，不含滚动条，易与inner混淆。 -
Window对象
window-浏览器
-
window.innerWidth/innerHeight浏览器可见区域的内宽度、高度（不含浏览器的边框，但包含滚动条）。 -
window.outerWidth/outerHeight浏览器外宽度（包含浏览器的边框，因各个浏览器的边框边一样，得到的值也是不一样的）。 -
window.screenLeft/screenTop浏览器的位移。
ie浏览器的内边缘距离屏幕边缘的距离，chrome浏览器的外边缘距离屏幕边缘的距离 -
window.screenX/screenY浏览器的位移
ie9/10浏览器的外边缘距离屏幕边缘的距离，chrome浏览器的外边缘距离屏幕边缘的距离。 -
window.pageXOffset/pageYOffset表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离。 -
window.scrollX/scrollY表示浏览器X轴（水平）、Y轴（垂直）滚动条的偏移距离。
由此可知，chrome的screenLeft和screenX是相等的（其目的是为了兼容ie和firefox）。chrome和firefox中window.pageXOffset和window.scrollX是相等的
screen-屏幕
-
window.screen.width/height屏幕的宽度、高度（指的是屏幕的分辨率，单位为像素）。 -
window.screen.availWidth/availHeight屏幕的可用宽度、高度（通常与屏幕的宽度、高度一致）。
element-元素
元素的宽度、位移、距离以元素的盒模型为content-box为例。即：box-sizing: content-box;
-
elment.clientWidth/clientHeight不包含滚动条宽度 clientWidth = padding + width
有滚动条时：clientWidth=元素左内边距宽度+元素宽度+元素右内边距宽度-元素垂直滚动条宽度
无滚动条时：clientWidth=元素左内边距宽度+元素宽度+元素右内边距宽度 -
element.clientLeft/clientTopborder宽度，clientLeft为左边框宽度，clientTop为上边框宽度。 -
element.offsetWidth/offsetHeight
offsetWidth = border + padding + width = clientWidth + clientLeft
offsetWidth = 元素左边框宽度 + 元素左内边距宽度 + 元素宽度 + 元素右内边距宽度 + 元素右边框宽度。 -
element.offsetLeft/offsetTop表示该元素相对于最近的定位祖先元素的距离。 -
element.scrollWidth/scrollHeight
有滚动条时：scrollWidth
chrome、firefox、ie8/9/10：左内边距宽度+内容宽度。 ie6/7：左内边距宽度+内容宽度+右内边距宽度（是由CSS的BUG引起）。
无滚动条时：左内边距宽度+宽度+右内边距宽度。 -
element.scrollLeft/scrollTop表示当前元素的水平滚动条向右侧滚动的距离
总结：
屏幕宽度：window.screen.width
浏览器内宽度：window.innerWidth || document.documentElement.clientWidth
元素内容宽度：element.clientWidth
元素占位宽度：element.offsetWidth
二、jQuery宽高计算
-
$(window).width()与window.innerWidth有什么区别？
window.innerWidth获取当前窗口的宽度(包含滚动条)，$(window).width()获取当前窗口的宽度(不包含滚动条
- jQuery宽高
-
width()/height()：获得或设置元素内容的宽/高；若元素的display：none，其值为0。 -
innerWidth()/innerHeight()：获得包括内边距（padding）的元素宽度/高度，不包括边框； -
outerWidth()/outerHeight()：获得包括内边距(padding)和边框(border)的元素宽度/高度； -
outerWidth(true)/outerHeight(true)：获得整个元素的宽度/高度，包括外边距(margin)、边框(border)、内边距(padding)和内容(width)
- 元素偏移量
原生js用element.offsetTop/left是相对于父元素的偏移量；
jQuery用offset()和position()方法，这两个方法都返回一个对象，包含top和left属性。不同的是前者是相对于document，后者相对于已定位的父元素。
网友评论