screenX、clientX、pageX的区别

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <style>

        body {

            margin: 0;

            padding: 0;

        }

        .div {

            text-align: center;

            font-size: 24px;

            height: 300px;

            width: 1300px;

            line-height: 300px;

            color: yellow;

        }

        #d1 {

            background-color: red;

        }

        #d2 {

            background-color: green;

        }

        #d3 {

            background-color: blue;

        }

        #d4 {

            position: absolute;

            background-color: yellow;

            height: 150px;

            width: 120px;

            top: 0;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            window.onscroll = function () {

                $("#d4").css("top", getScrollTop());

            };

            document.onmousemove = function (e) {

                if (e == null) {

                    e = window.event;

                }

                var html = "screenX:" + e.screenX + "<br/>";

                html += "screenY:" + e.screenY + "<br/><br/>";

                html += "clientX:" + e.clientX + "<br/>";

                html += "clientY:" + e.clientY + "<br/><br/>";

                if (e.pageX == null) {

                    html += "pageX:" + e.x + "<br/>";

                    html += "pageY:" + e.y + "<br/>";

                } else {

                    html += "pageX:" + e.pageX + "<br/>";

                    html += "pageY:" + e.pageY + "<br/>";

                }

                $("#d4").html(html);

            };

        });

        function getScrollTop() {

            var top = (document.documentElement && document.documentElement.scrollTop) ||

              document.body.scrollTop;

            return top;

        }

    </script>

</head>

<body>

    <div id="d1" class="div">div1 height:300px width:1300px</div>

    <div id="d2" class="div">div2 height:300px width:1300px</div>

    <div id="d3" class="div">div3 height:300px width:1300px</div>

    <div id="d4"></div>

</body>

</html>

clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框 (clientWidth = width + padding)

clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框 (clientHeight = height + padding)

clientLeft: 获取对象的border宽度

clientTop: 获取对象的border高度

offsetWidth: 当前对象的宽度 (offsetWidth = width + padding + border)

offsetHeight: 当前对象的高度 (height + padding + border)

offsetLeft: 当前对象到其上级层左边的距离 (不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性)

position:

　　static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

　　relative：生成相对定位的元素，相对于其正常位置进行定位。（正常位置仍然在DOM流中）

　　absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。(不再DOM流中)

　　fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。(不再DOM流中)

display:

　　none: 让元素脱离文档流，不显示，不占文档空间

　　block: 此元素将显示为块级元素，此元素前后会带有换行符

　　inline: 默认。此元素会被显示为内联元素，元素前后没有换行符。

　　inline-block: 行内块元素(既是行内元素又能设置高度)。（CSS2.1 新增的值）

巴特西

screenX、clientX、pageX的区别

最新文章

热门文章