JS中各种尺寸的用法大全

JS中各种尺寸的获取

页面上的尺寸获取
  • clientWidth/clientHeight——视口大小:可见区域的宽度或高度,不包括border、水平滚动条、margin的元素的宽度或高度,只包括元素的内容区域和padding值。

JS中各种尺寸的用法大全_第1张图片

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

JS中各种尺寸的用法大全_第2张图片

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

JS中各种尺寸的用法大全_第3张图片

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

JS中各种尺寸的用法大全_第4张图片

//例如通过设置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 呢,这是要区分有没有产生滚动条而言的, 但是上边两个式子恒成立,所以用上边式子最好。

JS中各种尺寸的用法大全_第5张图片

你可能感兴趣的:(js,javascript)