JS获取宽高

针对某一个元素的宽高

一、clientWidth和clientHeigh、clientTop和clientLeft

1. clientWidth的实际宽度
clientWidth = width+左右padding
2. clientHeigh的实际高度
clientHeigh = height + 上下padding
3. clientTop的实际宽度
clientTop = boder.top(上边框的宽度)
4. clientLeft的实际宽度
clientLeft = boder.left(左边框的宽度)

二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

1. offsetWidth的实际宽度
offsetWidth = width + 左右padding + 左右boder
2. offsetHeith的实际高度
offsetHeith = height + 上下padding + 上下boder
3. offsetTop实际宽度
offsetTop：当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离
4. offsetLeft实际宽度
offsetLeft：当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的距离。如果父级都没有定位，则分别是到body 顶部 和左边的距离

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

1. scrollWidth实际宽度
scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度）
2. scrollHeight的实际高度
scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
3. scrollTop
scrollTop :内容层顶部 到 可视区域顶部的距离
4. scrollLeft
scrollLeft:内容层左端 到 可视区域左端的距离

---

针对浏览器的宽高

一、Javascript

document.body.clientWidth //网页可见区域宽(body)
document.body.clientHeight //网页可见区域高(body)
document.body.offsetWidth //网页可见区域宽(body)，包括border、margin等
document.body.offsetHeight //网页可见区域宽(body)，包括border、margin等
document.body.scrollWidth //网页正文全文宽，包括有滚动条时的未见区域
document.body.scrollHeight //网页正文全文高，包括有滚动条时的未见区域
document.body.scrollTop //网页被卷去的Top(滚动条)
document.body.scrollLeft //网页被卷去的Left(滚动条)
window.screenTop //浏览器距离Top
window.screenLeft //浏览器距离Left
window.screen.height //屏幕分辨率的高
window.screen.width //屏幕分辨率的宽
window.screen.availHeight //屏幕可用工作区的高
window.screen.availWidth //屏幕可用工作区的宽

二、Jquery

$(window).height() //浏览器当前窗口可视区域高度
$(document).height() //浏览器当前窗口文档的高度
$(document.body).height() //浏览器当前窗口文档body的高度
$(document.body).outerHeight(true) //浏览器当前窗口文档body的总高度 包括border padding margin
$(window).width() //浏览器当前窗口可视区域宽度
$(document).width() //浏览器当前窗口文档对象宽度
$(document.body).width() //浏览器当前窗口文档body的宽度
$(document.body).outerWidth(true) //浏览器当前窗口文档body的总宽度 包括border padding margin

js得到屏幕宽高，页面宽高

window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度