网页上的各种宽高

2019独角兽企业重金招聘Python工程师标准>>>

##关系

window对象表示浏览器中打开的窗口
window.screen 对象包含有关用户屏幕的信息
document对象是window对象的一部分

##window window.innerHeight: 去除工具条与滚动条的窗口高度
window.innerWidth: 去除工具条与滚动条的窗口宽度
window.outerHeight:一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）
window.outerWidth:窗口的外部宽度，包括所有的界面元素（如工具栏/滚动）

##window.screen window.screen.height: 屏幕分辨率的高
window.screen.width: 屏幕分辨率的宽
window.screen.availHeight: 屏幕可用工作区高度，以像素计，减去界面特性，比如窗口任务栏
window.screen.availWidth: 屏幕可用工作区宽度，以像素计，减去界面特性，比如窗口任务栏
window.screenTop: 窗口相对于屏幕的Y坐标 window.screenLeft: 窗口相对于屏幕的X坐标

##client相关的高度 ###clientWidth&clientHeight:
元素可见部分高度, padding+content。
如果没有滚动条，即为元素设定的高度和宽度；
如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。

1）假如无padding无滚动：
clientWidth=style.width

2）假如有padding无滚动：
clientWidth=style.width+style.padding*2

3）假如有padding有滚动，且滚动时显示的：
clientWidth=style.width+style.padding*2-滚动条宽度

###clientLeft&clientTop:
这2个返回元素周围边框厚度，如果不指定一个边框或者不定位该元素，其值就是0。
clientTop=border-top的border-width
clientLeft=border-left的border-width

###兼容获取可视区域宽高 document.documentElement.clientWidth||document.body.clientWidth

documentElement对应HTML标签，
body对应BODY标签

##offset相关的高度 ###offsetWidth&offsetHeight:
元素的border+padding+content，该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关。

如果没有滚动条，即为元素设定的高度和宽度；
如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。

1）假如无padding无滚动：
offsetWidth=clientWidth=style.width

2）假如有padding无滚动：
offsetWidth=style.width+style.padding*2+border宽度*2
offsetWidth=clientWidth+

3）假如有padding有滚动，且滚动时显示的：
offsetWidth=style.width+style.padding*2+border宽度*2 offsetWidth=clientWidth+滚动条宽度+border宽度*2

###offsetLeft&.offsetTop:
offsetParent:
1）如果当前元素的父级元素没有进行CSS定位(postion为absolute或relative)，offsetParent为body；
2）如果当前元素的父级元素中有CSS定位(postion为absolute或relative)，offsetParent取最近的那个父级元素；

在IE6/7中
offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)
在IE8/9/10及chrome中 offsetLeft=(offsetParent的margin-left)+(offParent的border宽度)+(offsetParent的padding-left)+(当前元素的margin-left)
在FireFox中 offsetLeft=(offsetParent的margin-left)+(offsetParent的padding-left)+(当前元素的margin-left)

##document scroll相关的高度 ###document.body的scrollWidth和scrollHeight 1）给定高度小于浏览器窗口
scrollWidth=浏览器窗口的高度
scrollHeight=浏览器窗口的高度

2）给定高度大于浏览器窗口，且内容小于给定高度 scrollWidth=给定宽度+内容的padding+margin+border scrollHeight=给定高度+内容的padding+margin+border

3）给定高度大于浏览器窗口，且内容大于给定高度 scrollWidth=内容宽度+内容的padding+margin+border scrollHeight=内容高度+内容的padding+margin+border

###某div的scrollWidth和scrollHeight 1）无滚动条：
scrollWidth=clientWidth=style.widhth+style.padding*2

2）有滚动条：
scrollWidth=实际内容宽度+padding*2
scrollHeight=实际内容高度+padding*2

###scrollLeft和scrollTop 当元素其中的内容超出其宽高时，元素被卷起的宽度和高度

##事件event的宽高 1）clientX和clientY：相对于浏览器(可视区左上角0,0)的坐标；
2）screenX和screenY：相对于设备屏幕左上角(0,0)的坐标；
3）offsetX和offsetY：相对于事件源左上角(0,0)的坐标；
4）pageX和pageY：相对于真个网页左上角(0,0)的坐标；
5）X和Y：ie属性，相对于用CSS动态定位的最内层包容元素；

##jQuery里的宽高 1）width()： 返回无单位， css("width")的结果有单位
2）innerWidth(), innerHeight() ：包括padding和border
3）outerWidth(), outerHeight() ：包括padding, border, margin
4) offset()：相对于document的当前坐标值
5）position()：相对于offsetParent的当前坐标值

转载于:https://my.oschina.net/braveCS/blog/787026