clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y ,offsetTop,offsetLeft 详解

2022-07-31 17:47:13

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离，不随页面滚动而改变

兼容性：所有浏览器均支持

pageX/Y:

pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变

兼容性：除IE6/7/8不支持外，其余浏览器均支持

offsetX/Y:

offsetX/Y获取到是触发点相对被触发dom的左上角距离，不过左上角基准点在不同浏览器中有区别，其中在IE中以内容区左上角为基准点不包括边框，如果触发点在边框上会返回负值，而chrome中以边框左上角为基准点。

兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持

layerX/Y:

layerX/Y获取到的是触发点相对被触发dom左上角的距离，数值与offsetX/Y相同，这个变量就是firefox用来替代offsetX/Y的，基准点为边框左上角，但是有个条件就是，被触发的dom需要设置为position:relative或者position:absolute，否则会返回相对html文档区域左上角的距离

兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持

screenX/Y:

screenX/Y获取到的是触发点相对显示器屏幕左上角的距离，不随页面滚动而改变

兼容性：所有浏览器均支持

拖拽小例子

<style>
    #div1 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
</style>
<div id="div1"></div>
<script>
    var oDiv1 = document.getElementById("div1");
    oDiv1.onmousedown = function(event) {
        var disX = event.clientX - oDiv1.offsetLeft;
        var disY = event.clientY - oDiv1.offsetTop;
        document.onmousemove = function(event) {
            oDiv1.style.left = event.clientX - disX + "px";
            oDiv1.style.top = event.clientY - disY + "px";
        }
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
</script>

obj.clientWidth //元素的宽度(可视区的宽度)不包含border 只读属性

obj.clientHeight //元素的高度(可视区的高度度)不包含border 只读属性

obj.offsetLeft //元素相对于父元素的left 只读属性，也就是margin-left的值，不含单位

obj.offsetTop //元素相对于父元素的top 只读属性，也就是margin-top的值，不含单位

obj.offsetWidth //元素的宽度(实际的宽度)包含border 只读属性

obj.offsetHeight //元素的高度(实际的宽度)包含border 只读属性

区别：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = width + padding + border
offset比client多了border的宽度

obj.scrollLeft 是父元素在滚动，就像页面内容把body撑开了出现滚动条，我们是在滚动body的滚动条，而不是滚动内容

无缝滚动小例子

<style>

#div1 {
　　width: 363px;
　　overflow: hidden;
}
</style>
<div id="div1">
　　<img src="http://457375608.github.io/public/images/test01.jpg" alt="">
</div>
<script>
var oDiv1 = document.getElementById("div1");
setInterval(function() {
　　if (oDiv1.scrollLeft >= oDiv1.offsetWidth) {
　　　　oDiv1.scrollLeft = 0
　　} else {
　　　　oDiv1.scrollLeft++
　　}
}, 30)
</script>

无缝滚动代码，注意是oDiv0在滚动，当滚动的距离大于自身的宽度是让它重新滚动以达到无缝滚动的目的

利用left也可做无缝滚动

<style>
    #div1 {
        width: 363px;
        height:100px;
        overflow: hidden;
        position: relative;
    }
    #div1 img{
        width:726px;
        height:100px;
        position: absolute;
        top:0;
        left:0;
    }
</style>
<div id="div1">
    <img src="http://457375608.github.io/public/images/test01.jpg" alt="">
</div>
<script>
    var oDiv1 = document.getElementById("div1");
    var oImg1 = oDiv1.getElementsByTagName('img')[0];
    oImg1.num=0
    setInterval(function() {
        oImg1.num--;
        if (parseInt(oImg1.style.left) <= -oDiv1.offsetWidth) {
            oImg1.style.left =oImg1.num= 0
        } else {
            oImg1.style.left=oImg1.num+"px"
        }
    }, 30)
</script>

码农公寓