博客

一、window的宽高

/**
             * window中涉及的宽高有window.innerWidth, window.innerHeight, window.outerWidth, window.outerHeight,以及window.screen涉及的宽高 screen.width, screen.height, screen.availWidth, screen.availHeight, screenTop, screenLeft, screenX, screenY
             * 
             * window.innerWidth   浏览器的显示页面的宽度（加上滚动条的宽度，不包括浏览器的边框）
             * window.outerWidth   浏览器的宽度（包括边框等）
             * window.innerHeight   浏览器的显示页面的高度（加上滚动条的宽度，不包括浏览器的边框）
             * window.outerHeight   浏览器的高度（加上顶部的菜单栏等、底部的状态栏等、边框等）
             * screen.width 屏幕的宽度  固定不变
             * screen.availWidth 屏幕的可用宽度  固定不变  = screen.width
             * screen.height 屏幕的高度  固定不变
             * screen.availHeight 屏幕的可用高度  固定不变  = screen.height - 任务栏的高度
             * screenTop  浏览器的窗口左上角距离屏幕顶部的距离   火狐不支持
             * screenLeft  浏览器的窗口左上角距离屏幕左边的距离  火狐不支持
             * screenX  浏览器的窗口左上角距离屏幕左边的距离   ie9+支持
             * screenY  浏览器的窗口左上角距离屏幕顶部的距离   ie9+支持
             * 
             */

            console.log('window.innerWidth=' + window.innerWidth);
            console.log('window.outerWidth=' + window.outerWidth);
            console.log('window.innerHeight=' + window.innerHeight);
            console.log('window.outerHeight=' + window.outerHeight);
            console.log('screen.width=' + screen.width);
            console.log('screen.availWidth=' + screen.availWidth);
            console.log('screen.height=' + screen.height);
            console.log('screen.availHeight=' + screen.availHeight);
            console.log('screenTop=' + screenTop);
            console.log('screenLeft=' + screenLeft);
            console.log('screenX=' + screenX);
            console.log('screenY=' + screenY);

二、document的宽高

document的宽高涉及有client、offset和

// 1、假如无padding，无滚动条，无border
offsetWidth = clientWidth = style.width; 

// 2、假如有padding，无滚动条，有border
offsetWidth = style.width + style.padding*2 + border宽度*2;
offsetWidth = clientWidth + border宽度*2;

// 3、假如有padding，有滚动条，有border
offsetWidth = style.width + style.padding*2 + border宽度*2;
offsetWidth = clientWidth + 滚动条宽度 + border宽度*2;