js中window和document的宽高

一、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;
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值