前端页面中的各种宽高和位置

最新推荐文章于 2023-08-22 15:56:04 发布

deryabuder

最新推荐文章于 2023-08-22 15:56:04 发布

阅读量2.4k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/sinat_31900531/article/details/91377200

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

坐标系：

以屏幕的左上角为原点，水平向右为x轴，竖直向下是y轴。

一、宽高

（1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度

（2）offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度

（3）scrollHeight、scrollWidth→元素宽高（内容的实际高度+上下padding<如果没有限制div的height，即height是自适应的，那么scrollHeight=clientHeight>）

    * {
      margin: 0;
      padding: 0;
    }
    .content {
      height: 100px;
      border: 2px solid #f00;
      overflow: scroll;
    }

二、滚动距离

（1） offsetTop：为容器相对于document的top的绝对偏移---→等于top+margin-top

同理offsetLeft：容器相对于document的left的绝对偏移---→等于left+margin-left

（2）clientTop: 容器内部相对于容器本身的top偏移，实际就是border-width

（3）scrollTop: Y轴的滚动条没有，或滚到最上时是0；Y轴的滚动条滚到最下时是 scrollHeight-clientHeight。滚动时通常只能scrollTop，当scrollTop为 0 到 scrollHeight-clientHeight 是正常的滚动距离，否则就是滚动过头了（手机上的阻尼效果）。

    * {
      margin: 0;
      padding: 0;
    }
    .content {
      height: 50px;
      border: 2px solid #f00;
      overflow: scroll;
      margin-top: 50px;
    }

三、与网页和屏幕有关的宽高和位置

网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft （就是把上面几个宽高位置值应用在document.body上）
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
窗口的文档显示区的宽度：window.innerWidth

窗口的文档显示区的高度：window.innerHeight
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth

四、Element.getBoundingClientRect()函数

返回值是一个 DOMRect 对象，DOMRect 对象包含了一组用于描述边框的只读属性。width、height是元素自身的宽高+padding+border，top、bottom、left、right是元素的上下左右边界到视口左上角的距离。

    .content {
      margin: 20px;
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 2px solid #f00;
      overflow: scroll;
    }

五、鼠标事件中的坐标

点击位置距离当前body可视区域的x，y坐标：clientX、clientY
对于整个页面来说，包括了被卷去的body部分的长度：pageX、pageY
点击位置距离当前电脑屏幕的x，y坐标：screenX、screenY
相对于带有定位的父盒子的x，y坐标：offsetX、offsetY
和screenX、screenY一样：x、y

è¿éåå¾çæè¿°

    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
    }
    <body onclick="handleClick(event)"></body>

deryabuder

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端页面中的各种宽高和位置

坐标系：以屏幕的左上角为原点，水平向右为x轴，竖直向下是y轴。一、宽高（1）clientHeight、clientWidth→元素宽高（height+padding，不包含边框），可以理解为元素可视区域高度（2）offsetHeight、offectWidth→元素宽高（height+padding+border，包含边框），可以理解为元素的可视高度（3...
复制链接

扫一扫