JS中各种尺寸的用法大全

wxd_97

于 2020-03-05 18:55:07 发布

阅读量2.4k

点赞数 9

文章标签： js javascript

本文链接：https://blog.csdn.net/wxd_97/article/details/104681198

版权

JS中各种尺寸的获取

页面上的尺寸获取

clientWidth/clientHeight——视口大小：可见区域的宽度或高度，不包括border、水平滚动条、margin的元素的宽度或高度，只包括元素的内容区域和padding值。

在这里插入图片描述

offsetWidth/offsetHeight——视觉大小：看得见的大小，不包括margin的元素的宽度或高度，只包括padding、border、水平滚动条的宽度或高度。

在这里插入图片描述

offsetTop/offsetLeft——当前元素的偏移量：当父级有定位，根据父级的偏移量，父级没有定位则是根据页面的偏移量。表示相对父级顶部或者左边的距离。

在这里插入图片描述

scrollWidth/scrollHeight——当产生滚动条时，元素里边全文内容的宽度或高度，包含溢出的文本的尺寸，也就是包含可滚动的距离(scrollTop/scrollLeft)。
scrollTop/scrollLeft——滚动的距离到顶部或左边的位置。(可设置)

在这里插入图片描述

//例如通过设置js中的scrollTop值实现点击按钮回到顶部功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        input{width: 60px;height: 60px;position: fixed;right: 20px;bottom: 50px;}
    </style>
</head>
<body style="height : 2000px">
    <input type="button" value="回顶部" id="btn">
</body>
<script>
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        document.documentElement.scrollTop = 0;
    }

</script>
</html>

注意：

当页面已经设置好宽高，而其子元素的高度时页面产生了滚动条。当把滚动条滑到最下边时，在滚动的过程中页面中上边的内容有部分被隐藏了，那么当前不可见部分的页面内容高度就是scrollHeight。当前可见的区域就是clientHeight 。那么此时，scrollHeight>clientHeight恒成立，O在没有滚动条时scrollHeight==clientHeight恒成立。所以得出结论，scrollHeight>=clientHeight恒成立。

鼠标中的尺寸获取

screenX/screenY——表示事件发生时，鼠标相对于当前显示器的X/Y坐标
clientX/clientY——表示事件发生时，鼠标相对于页面可视区域的X/Y坐标。
pageX/pageY——表示事件发生时，鼠标相对于页面的X/Y坐标，其中已经把滚动条滚过的高或宽计算在内。
offsetX/offsetY——表示事件发生时，鼠标相对于当前点击元素的X/Y坐标。有兼容，谷歌有，火狐没有。

**思考：**我们都知道clientX/clientY和pageX/pageY都是鼠标相对于页面的X/Y坐标。那么clientX/clientY与pageX/pageY的有怎样的关系？

pageX >= clientX, pageY >= clientY
pageX = clientX + ScrollLeft(滚动条滚过的水平距离)
pageY = clientY + ScrollTop(滚动条滚过的垂直距离)
当没有产生滚动条时， pageX = clientX

//当没有产生滚动条时， pageX = clientX
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 200px;height: 200px;background: red}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    var obox = document.getElementById("box");

    obox.onclick = function(eve){
        var e = eve || window.event;		//139 84
        // 事件发生时，鼠标相对于页面的可视区域的坐标
        console.log(e.clientX, e.clientY);
        // 事件发生时，鼠标相对于页面的坐标
        console.log(e.pageX, e.pageY);		//139 84
    }
</script>
</html>

//当产生滚动条时， pageX > clientX
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 200px;height: 2000px;background: red}
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    var obox = document.getElementById("box");

    obox.onclick = function(eve){
        var e = eve || window.event;
        // 事件发生时，鼠标相对于页面的可视区域的坐标
        console.log(e.clientX, e.clientY);          //177 925
        // 事件发生时，鼠标相对于页面的坐标
        console.log(e.pageX, e.pageY);              //177 1959
    }
</script>
</html>

**注意：**因为事件发生时，鼠标相对于当前元素的坐标，有兼容，谷歌有，火狐没有，也就是offsetX /offsetY 有兼容。那么可以得出以下公式：

e.pageX - obox.offsetLeft === e.offsetX
e.pageY - obox.offsetTop === e.offsetY
虽然说pageX >= clientX, pageY >= clientY，能不能用clientX/clientY替换pageX/pageY 呢，这是要区分有没有产生滚动条而言的，但是上边两个式子恒成立，所以用上边式子最好。

在这里插入图片描述