首页 > 代码库 > 各种宽高
各种宽高
1.显示器的分辨率
window.screen.width-----显示器的宽度 单位是p x
window.screen.height-----显示器的高度 单位是px
window.screen.availWidth-----显示器的可用宽度 是指浏览器窗口最大后,浏览器能撑开的宽度(滚动条也是浏览器的一部分)，
其中任务栏不包括在内，即使将任务栏设置为自动隐藏
window.screen.availHeight-----显示器的可用高度 是指浏览器窗口最大后,浏览器能撑开的高度(滚动条也是浏览器的一部分)，
其中任务栏不包括在内，即使将任务栏设置为自动隐藏
2.窗口的文档显示区
window.innerWidth-----窗口的当前宽度，其中包括滚动条 可以认为是窗口的可见宽度+滚动条 滚动条的宽高一般为17px
window.innerHeight-----窗口的当前高度，其中包括滚动条 可以认为是窗口的可见高度+滚动条 滚动条的宽高一般为17px
IE 8(包括)以下不兼容
3.窗口的可视区域
IE 7(包括)以上:
document.documentElement.clientWidth-----窗口的可视区域宽度，不包括滚动条
document.documentElement.clientHeight-----窗口的可视区域高度，不包括滚动条
IE 7(不包括)以下
document.body.clientWidth-----body的内容区宽度，不包括滚动条,不包括边框，不包括margin,但是包括padding
document.body.clientHeight-----body的内容区高度 ，不包括滚动条,不包括边框，不包括margin,但是包括padding
document.body以前是IE的私有属性，在IE7出现以前，用来获取可视区域大小的，后来各种浏览器也都开始支持该属性，但是还是存在问题的，比如
document.body是body元素，document.documentElement是html元素，在窗口缩小时，document.body.clientHeight一直都是body的真正宽度1104，而document.documentElement则能得到可视窗口的宽度。
这种bug在IE 7(包括)以上浏览器以及其他浏览器都存在
4.offsetWidth和offsetHeight元素自身宽高
document.documentElement.offsetWidth-----窗口(html)的自身宽度，不包括滚动条，不包括margin,但是包括padding,包括border
document.documentElement.offsetHeight-----窗口(html)的自身高度，不包括滚动条，不包括margin,但是包括padding,包括border
document.body.offsetWidth-----body的contentWidth+padding+border
document.body.offsetHeight-----body的contentHeight+padding+border;
可以理解为该元素边框包围的范围(包括边框)
5.页面的真正宽高
有时候元素的内容比元素本身宽，比本身高，scrollWidth&&scrollHeight是得到元素的实际宽高
document.documentElement.scrollWidth-----html的contentWidth+margin+border+padding
document.documentElement.scrollHeight-----html的contentHeight+margin+border+padding
6.offsetTop
本身外边框到父元素内边框的距离，各个浏览器计算方式差异很大
元素定位时，主要看元素的边框在哪里，边框的位置除了和定位的top,left等有关，还和margin有关
offsetTop是往上寻找祖先元素，第一个不是static定位的祖先元素就是该元素的offsetParent，offsetTop是本身元素的border到祖先元素的border距离。如果一直没有非static定位，则最后offsetParent是body元素
7.clientTop和clientLeft
clientTop-----border-top的值
clientLeft-----border-left的值
兼容性不行
8.scollTop和scrollLeft
scrollTop-----页面往上滚动的距离
scrollLeft-----页面往左滚动的距离
不应该使用document.documentElement.scrollTop，应该使用document.body.scrollTop代替
9.window.pageYOffset和window.pageXOffset
页面相对于窗口左上角的X和Y位置
各种宽高
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。