窗口宽高和坐标

最新推荐文章于 2022-05-20 10:42:52 发布

liuyongshun2

最新推荐文章于 2022-05-20 10:42:52 发布

阅读量542

点赞数

分类专栏： javascript 文章标签：测试 javascript

本文链接：https://blog.csdn.net/liuyongshun2/article/details/52166587

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

firefox，google，ie7~Edge

一、3种方法能够确定浏览器窗口的尺寸

方法1（ie8及其以下undefined）

不受滚动条影响
console.log( window.innerHeight )//- 浏览器窗口的内部高度 //662(由于打开了控制台)
console.log( window.innerWidth )//- 浏览器窗口的内部宽度  //1920(有无滚动条都不变)

// 
window.screen.height  // 都支持

方法2

// 只获取当前可见的宽受滚动影响 高不受影响。
console.log( document.documentElement.clientHeight ) 
console.log( document.documentElement.clientWidth )  //(滚动条1903)

方法3：

    //获取的是body的宽高，会抛去自带的8px的margin,(设置高为2000px则为2000px)
    document.body.clientHeight  // 0
    document.body.clientWidth    //1920(滚动条1903)

2、综合测试

        //前提：body的高度设置为2000px,做如下测试(控制台会导致高度改变)
            var h = window.innerHeight
            var _h = document.documentElement.clientHeight
            var _hh = document.body.clientHeight
            var w = window.innerWidth
            var _w = document.documentElement.clientWidth
            var _ww = document.body.clientWidth
            console.log( h )   
            console.log( _h )  
            console.log( _hh )  
            console.log( w )    
            console.log( _w )   
            console.log( _ww )

在ie下能正常运行，兼容写法：

    var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

二、其他视口和位置偏移

1、屏幕大小

            //获取屏幕大小，屏幕宽、高多少就是多少
            var w = screen.availWidth
            var h = screen.availHeight
            console.log( h )  // 1040
            console.log( w )  //1920

2、offsetHeight & offsetWidth

// 获取宽度，高度，包括padding和border。
// 获取body
document.body.offsetWidth();
// 获取元素
var ele = document.getElementById('test');
ele.offsetHeight()

3、offsetTop& offsetLeft & offsetParent;

获取对象相对于版面或相对于父元素的（父元素需设置定位）左侧位置

除了IE7获得的是到body的距离。其他均为到面板的距离。

// 如果父元素没设置定位，则结果都是body，如果有定位则输出父元素。
var ele = document.getElementById('test');
console.log(ele.offsetParent);

4、scrollTop & scrollLeft

受到”<!DOCTYPE html>“的影响，下面都是在声明下测试 , scrollTop的开始计算是从可视区域的最下边开始的。

    // google支持document.body;
    console.log(document.body.scrollTop);

    // firefox IE 支持document.documentElement
    console.log(document.documentElement.scrollTop);

兼容性写法：var top = document.body.scrollTop || document.documentElement.scrollTop;

5、scrollWidth & scrollHeight

// 类似document.body；IE和firefox不算body的8px的margin；google计算
document.body.scrollHeight;

// 都会计算body的8px的margin
document.documentElement.scrollHeight

三、位置获取

1、e.clientX & e.clientY

IE9+ 和firefox 和google有效。相对文档的水平座标，相对文档的垂直座标不受滚动影响。IE7和8需要正确指定event（window.event）。


var ele = document.getElementById('test');
ele.onclick = function(e) {
    console.log(e.clientX);
    console.log(e.clientY);
}

2、e.pageX & e.pageY

google 和firefox 可以直接获得滚动的坐标。

var ele = document.getElementById('test');
ele.onclick = function(e) {
    console.log(e.pageX);
    console.log(e.pageY);
}
// IE8和以下用下边的方式。
    var pageX = e.pageX,
        pageY = e.pageY;

    if(pageX === undefined) {
        pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
    }

    if(pageY === undefined) {
        pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
    }

3、e.screenX & e.screenY

IE7 & 8需要正确指定event。
    console.log(e.screenY);

IE7 & 8需要正确指定event。

4、e.offsetX & e.offsetY

相对于父元素的偏移量。

附图片：来自于网络
这里写图片描述

2016.8.22

2017.02.08二次编辑

liuyongshun2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
窗口宽高和坐标

window尺寸2种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）方法1window.innerHeight - 浏览器窗口的内部高度window.innerWidth - 浏览器窗口的内部宽度方法2document.documentElement.clientHeightdocument.documentElement.clientWidth方
复制链接

扫一扫

专栏目录