关闭

JS:window对象的pageXOffset、innerWidth、outerWidth、screenLeft、screenX

标签: pageXOffsetinnerWidthouterWidthscreenLeftscreenX
2751人阅读 评论(0) 收藏 举报
分类:

window.pageXOffset

获取页面文档向右滚动过的像素数。

window.pageYOffset

获取页面文档向下滚动过的像素数。

浏览器兼容性

IE7、8不支持,可以使用document.documentELement.scrollLeft/scrollTop来代替。

window.innerWidth

设置或获取浏览器窗口文档显示区域的宽度,包括滚动条。

window.innerHeight

设置或获取浏览器窗口文档显示区域的高度,包括滚动条。

浏览器兼容性

IE7、8不支持。

window.outerWidth

设置或获取浏览器窗口的外部宽度。

window.outerHeight

设置或获取浏览器窗口的外部高度。

浏览器兼容性

  • 在Chrome和Opera中,当浏览器窗口全屏化时,outerWidth和outerHeight指的是可以看到的浏览器部分所占据的空间。
  • 在FireFox、Safari、IE9和IE10中,当浏览器窗口全屏化时,outerWidth和outerHeight指的不仅是可以看到的浏览器所占据的空间,还包括其未显示部分。当浏览器窗口退出全屏化时,其四周会有8px的边框。而当浏览器窗口全屏化时,边框虽然未被显示,但仍然是计算在outerWidth和outerHeight内。
  • IE7、8不支持。

window.screenLeft

设置或获取浏览器窗口左上角相对于屏幕左上角的x坐标。

window.screenTop

设置或获取浏览器窗口左上角相对于屏幕左上角的y坐标。

浏览器兼容性

  • 在Chrome和Opera中,当浏览器窗口全屏化时,screenLeft和screenTop指的是可见的浏览器部分与屏幕左上角的距离,两者的值都为0。
  • 在Safari中,当浏览器窗口全屏化时,screenLeft和screenTop指的是整个浏览器与屏幕左上角的距离,因为在全屏化的时候浏览器窗口边缘8px的边框不显示,但依然会计算在内,所以screenLeft和screenTop的值是(-8,-8)。
  • FireFox不支持。
  • 在IE中,screenLeft和screenTop指的是浏览器窗口文档显示区域的左上角相对于屏幕左上角的位置。

window.screenX

设置或获取浏览器窗口左上角相对于屏幕左上角的x坐标。

window.screenY

设置或获取浏览器窗口左上角相对于屏幕左上角的y坐标。

浏览器兼容性

  • 在Chrome、Opera和Safari中,screenX和screenY与screenLeft和screenTop所起的作用是一样的,所得数值一样。
  • 在FireFox、IE9和IE10中,当浏览器窗口全屏化时,screenX和screenY指的是整个浏览器与屏幕左上角的距离,因为在全屏化的时候浏览器窗口边缘8px的边框不显示,但依然会计算在内,所以screenLeft和screenTop的值是(-8,-8)。
  • IE7、8不支持。

本文所用的测试代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>鬼眼邪神的博客</title>
        <meta name="author" content="鬼眼邪神"/>
        <meta name="description" content="鬼眼邪神的博客,http://blog.csdn.net/u010200222"/>
        <style>
            *{
                margin:0;
                padding:0;
            }
            html {
                margin:20px;
                padding:20px;
                width:600px;
                border:10px solid #000;
            }
            body {
                margin:0 0 0 100px;
                width:400px;
                height:800px;
                border:5px solid #000;
                background:yellow;
                overflow:scroll;
            }
            .green {
                position:relative;
                margin:50px auto;
                padding:20px;
                width:80px;
                height:80px;
                border:10px solid #000;
                background:rgb(0,255,0);
            }
            .con {
                margin:0 auto;
                width:380px;
            }
        </style>
        <script>
            (function(){
                window.onload=function (){
                    var con=document.getElementById("con");
                    var green=document.getElementById("green");
                    var body=document.getElementById("body");
                    document.onclick=function (event){
                        var event=window.event||event;
                        con.innerHTML=
                            "window.pageXOffset="+window.pageXOffset+","+
                            "window.pageYOffset="+window.pageYOffset+"<br/>"+
                            "window.innerWidth="+window.innerWidth+","+
                            "window.innerHeight="+window.innerHeight+"<br/>"+
                            "window.outerWidth="+window.outerWidth+","+
                            "window.outerHeight="+window.outerHeight+"<br/>"+
                            "window.screenLeft="+window.screenLeft+","+
                            "window.screenTop="+window.screenTop+"<br/>"+
                            "window.screenX="+window.screenX+","+
                            "window.screenY="+window.screenY+"<br/>";
                    }
                }
            })();
        </script>
    </head>

    <body>
        <div class="green" id="green">
            <div class="red"></div>
        </div>
        <div class="con" id="con"></div>
    </body>
</html>


0
0
查看评论

Window pageXOffset 和 pageYOffset 属性

Window pageXOffset 和 pageYOffset 属性1. 定义和用法pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。2. 语法window.pageXOffset wind...
  • liujinahui
  • liujinahui
  • 2015-11-10 16:31
  • 1542

pageX、clientX、screenX、offsetX、layerX、x 在不同浏览器上的使用及区别

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff: e.p...
  • MOONCOM
  • MOONCOM
  • 2016-10-31 16:18
  • 1445

【浏览器】window.pageXOffset/pageYOffset (相对于)页面偏移(CSS像素)

  • tuhuolong
  • tuhuolong
  • 2014-02-20 22:17
  • 1326

JS:window对象的pageXOffset、innerWidth、outerWidth、screenLeft、screenX

window.pageXOffset 获取页面文档向右滚动过的像素数。 window.pageYOffset 获取页面文档向下滚动过的像素数。 浏览器兼容性 IE7、8不支持,可以使用document.documentELement.scrollLeft/scrollTop来代替。 window.i...
  • u010200222
  • u010200222
  • 2013-09-02 20:24
  • 2751

获取页面长宽和滚动条的位置

  • 2010-01-21 10:00
  • 2KB
  • 下载

js及innerWidth、innerHeight、outerWidth和outerHeight属性

跨浏览器确定一个窗口的大小不是一件简单的事。Firefox.Safari.Opera和Chrome均为此提供了4个属性:innerWidth、innerHeight、 outerWidth和outerHeight。 在Safari和Firefox中,outerWidth和outerHeight返回浏...
  • toumingyumaohuiyi
  • toumingyumaohuiyi
  • 2016-11-23 15:04
  • 1214

jquery 的 outerWidth() 、width() 、innerWidth()

.width()、innerWidth()、outerWidth()方法 计算jQuery对象的宽度,它们之间的区别在于是否把padding、margin计算在内,因此它们的值 width() outerWidth(options) 获取第一个匹配元素外部宽度(默认包括补白 padding 和...
  • hdchangchang
  • hdchangchang
  • 2012-10-24 10:41
  • 4508

HTML中常见的各种位置距离(clientTop clientLeft clientWidth ClientHeight offsetleft offsettop offsetwidth offset

DOM中都有一些什么宽度、高度。 常见的 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeight offsetLeft clientLeft scrollL...
  • zxf13598202302
  • zxf13598202302
  • 2016-04-15 16:25
  • 1707

window.scrollY和scrollX在IE下报错的解决方法

参考链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollY(IE>=9)建议使用window.pageYOffset来代替window.scrollY,使用 window.pageXOffset 代替 window....
  • u014291497
  • u014291497
  • 2017-07-10 23:21
  • 665

jQuery中width()、innerWidth()、outerWidth()的区别

jQuery中width()、innerWidth()、outerWidth()的区别 outerWidth() outerWidth()函数用于获取当前匹配元素的外宽度 外宽度默认包括元素的padding、border但是不包括margin部分的宽度   innerWidt...
  • xiaobing_hope
  • xiaobing_hope
  • 2015-12-18 17:29
  • 791
    个人资料
    • 访问:47737次
    • 积分:562
    • 等级:
    • 排名:千里之外
    • 原创:77篇
    • 转载:4篇
    • 译文:1篇
    • 评论:2条
    文章分类
    文章存档