宽高的整理

1.window和document的区别?
document对象是窗口(window)对象的一部分
2.window.location和document.location之间的区别?
window对象的location属性引用的时location对象，表示该窗口中当前显示文档的URL。
document的对象的location属性也是引用了location对象。
window.location= = =document.location //true
window展示图
注意:
window.可以省列,如window.alert()可以写成alert();
测试理解获取宽高可以直接用console.log(innerWidth)形式;
驼峰式的写法需注意;

内部
window.innerWidth:兼容ie9以上
window.innerHeight:兼容ie9以上
外部
window.outerWidth:兼容ie9以上
window.outerHeight:兼容ie9以上

window.screen(史困母):对象包含有关用户屏幕信息;兼容性好
window.screen.width:
window.screen.height:
window.screen.availWidth:可利用的宽度
window.screen.availHeight:可利用的高度
window.screenTop:浏览器窗口距离屏幕顶上的高
window.screenLeft:浏览器窗口距离屏幕左上的宽

document
1.document.body.client
document.body.client.Width(克莱为的)
document.body.client.Height(克莱害的)
该属性指的是元素的可视部门宽度和高度(即padding+content)
如果没有滚动条,即为元素设定的高度和宽度;如果有;滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高
假如无padding无滚动
clientWidth=style.width
假如有padding无滚动
clientWidth=style.width+style.padding*2
假如有padding有滚动,且滚动是显示的
clientWidth=style.width+style.padding*2-滚动轴宽度

    document.body.client.Left        
    document.body.client.Top
            这一对属性是用来读取元素的border的宽度和高度
            clientTop=border-top的border-width
            clientTop=border-top的border-width

2.document.body.offset(欧服沙特)
document.body.offsetWidth
document.body.offsetHeight
这一对属性指的是元素的border+padding+content的宽度和高度
该属性和期内部是否超出元素大小无关;只和本来设定的border以及width和height有关
假如无padding无滚动无border
offsetWidth=clientWidth=style.width
假如有padding无滚动有border
offsetWidth=style.width+style.padding*2+(border-width)*2
offsetWidth=clientWidth+border宽度*2
假如有padding,有滚动,且滚动是显示的,有border
offsetWidth=style.width+style.padding*2+(border-width)*2
offsetWidth=clientWidth+滚动轴宽度+border宽度*2

    document.body.offsetLeft(有点坑,兼容问题,解析不一样)
    document.body.offsetTop
            offsetPartent(父级)
            在IE6/7中
            offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left)
            在IE8/9/10及谷歌中
            offsetLeft=(offsetParent的margin-left)+(当前元素的margin-left)+(offterParent的border宽度)+(offsetParent的padding-left)
            在火狐中
            offsetLeft=(offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left)

宽高的整理(来自慕课网js/jquery宽高的理解) - 小棋子 - 小棋子[前端]

3.document.body.scroll
注意:document.body的scrollWidth和scrollHeight与div的scrollWidth和scrollHeight是有区别的.
document.body.scrollWidth
document.body.scrollHeight
document.body的scrollWidth和scrollHight?(三种情况)
一.给定宽高小于浏览器窗口
scrollWidth通常是浏览器窗口的宽度
scrollHeight通常是浏览器窗口的高度
二.给定宽高大于浏览器窗口,且内容小于给定宽高
scrollWidth给定的宽度+其所有的padding和margin和border
scrollHeight给定的高度+其所有的padding和margin和border
三.给定宽高大于浏览器窗口,且内容大于给定宽高
scrollWidth内容的宽度+其所有的padding和margin和border
scrollHeight内容的高度+其所有的padding和margin和border

            div的scrollWidth和scrollHight?(两种情况)
            一.无滚动轴时
                    scrollWidth==clientWidth=style.width+style.padding*2
            二.有滚动轴时
                    scrollWidth==实际内容的宽度+padding*2
                    scrollHeight==实际内容的高度+padding*2        

    document.body.scrollLeft(默认是0,0;可被读写)
    document.body.scrollTop
            这对属性是可读写的,指的是当元素其中的内容超出宽高的时候,元素被卷起的高度和宽度.

另:obj.style.width和obj.style.height
对于节点元素,它对象任意一个属性是可读写的,style.width等于css属性中的宽度;style.height等于css属性中的高度