（screenX、pageX、clientX、offsetX）（offsetWidth、scrollWidth、clientWidth） （srcollTop、clientTop）(offsetLeft、style.left) 区别

1、screenX、pageX、clientX、offsetX

screenX: 鼠标指针距离屏幕左侧的距离，不随滚动条变化而变化

pageX: 鼠标指针距离文档左侧的距离，不随滚动条变化而变化

clientX: 鼠标指针距离可视窗口左侧的距离, 随滚动条变化而变化， 如果拖动滚动条让元素离可视窗口左侧越近值越小

offsetX: 鼠标指针距离当前元素左侧的距离

附上测试代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <div id="testDiv" style="margin-left: 1200px;height: 1200px; width: 1200px;border: 1px solid red;">
    </div>
    <script src="../jquery-1.9.1.min.js"></script>
    <script>
        var $div = $('#testDiv');
        $div.on("mousemove",
            function (e) {
                var pageX = e.pageX;
                var pageY = e.pageY;
                var clientX = e.clientX;
                var clientY = e.clientY;
                var offsetX = e.offsetX;
                var offsetY = e.offsetY;

                var html = '<p> pageX:' +
                    pageX +
                    ',pageY:' +
                    pageY +
                    ',clientX:' +
                    clientX +
                    ',clientY:' +
                    clientY +
                    ',offsetX:' +
                    offsetX +
                    ',offsetY:' +
                    offsetY +
                    '</p>';
                $(this).html(html);
            }
        );
    </script>
</body>
</html>

 

2. offsetWidth、scrollWidth、clientWidth

offsetWidth: 获取元素宽度，包含padding、border 不包含margin

clientWidth: 获取元素宽度，包含pdding，不包含 border、margin，是元素可见宽度不包含溢出部分不可见的宽度

scrollWidth: 只读，获取元素宽度，包含pdding，不包含 border、margin， 也包含溢出不可见的部分的宽度

 

3.srcollTop、clientTop

scrollTop: 元素滚动后距离容器顶部的距离

clientTop: 获取border的宽度

ele.srcollHeight - ele.scrollTop === ele.clientHeight  来判断元素是否滚动到底

4. offsetLeft、style.left

offsetLeft: 元素自身不用定位（即默认定位），距离元素最近且非static的父元素的左偏移量，如果向上一直未找到就相对于body的左偏移量

style.left: 元素自身非static定位

 5.window.pageXOffset 与  document.body.scrolleft

都是水平方向上的文档滚动距离

window.pageXOffset  IE9以下不兼容

dcument.body.scollLeft   IE8

6. getBoundingClientRect()

var recObj = obj.getBoundingClientRect()

recObj.top: 元素上边到视窗上边的距离

recObj.bottom: 元素下边到视窗上边的距离

recObj.left: 元素左边到视窗左边的距离

recObj.right: 元素右边到视窗左边的距离

posted @ 2021-01-20 16:46  碗粥  阅读(113)  评论(0)  编辑  收藏  举报