可视化宽度的区别和应用场景

最新推荐文章于 2024-05-21 14:15:14 发布

梓木Tosikat

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量208

点赞数

文章标签： javascript html5 css

本文链接：https://blog.csdn.net/qq_42234538/article/details/108169556

版权

可视化宽度的区别和应用场景

1.clientWidth 、clientHeight、clientTop、clientLeft

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 400px;
      height: 200px;
      background-color: #3498db;
      border-top: 10px solid orangered;
      border-bottom: 20px solid orangered;
      border-left: 30px solid orangered;
      border-right: 40px solid orangered;
      margin: 100px auto;
      padding:20px;
    }
  </style>
</head>
<body>
  <div class="box">

  </div>
  <script>
    var box = document.querySelector('.box');

    console.log("box-width: " + box.clientWidth);//box的高度 240
    console.log("box-height: " + box.clientHeight);//box的宽度440

    console.log("box-TopBorder: " + box.clientTop);//box外边框到内边框的距离 仅指上边框 10
    console.log("box-LeftBorder: " + box.clientLeft);//box外边框到内边框的距离 仅指左边框 30
  </script>
</body>
</html>

clientWidth

属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（如果有）、边框和外边距。

如上图所示计算方式为如下两种

存在垂直滚动条

content width + padding - scrollbarWidth
不存在滚动条

content width +padding

clientHeight同理

clientLeft

计算方式为如下两种情况：

如果文字方向从右向左（默认从左往右,通过设置direction:rtl；）进行排列，且存在垂直滚动条的情况下

border width + scrollbar width
默认情况下

border width

注意！如果当前元素是行内元素（inline)时，clientLeft将返回 0；

clientTop同理

2.offsetWidth、offsetHeight、offsetTop、offsetLeft

offsetWidth

官方解释：**HTMLElement.offsetWidth** 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。

这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用element.getBoundingClientRect().

如果用document.documentElement.offsetWidth获取窗口大小那么根据窗口的变化这个值也会跟着变化

通常对于元素本身如上的例子会显示

offsetWidth = width + 左右padding + 左右boder = 510

offsetHeight = height +上下padding + 上下border = 270

offsetTop

官方解释：HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    .boxOut{
      width: 600px;
      height: 600px;
      outline: 1px solid red;
      margin: 0 auto;
      overflow: hidden;
    }
    .box{
      width: 400px;
      height: 200px;
      background-color: #3498db;
      border-top: 10px solid orangered;
      border-bottom: 20px solid orangered;
      border-left: 30px solid orangered;
      border-right: 40px solid orangered;
      padding: 20px;
      margin: 50px auto;
    }
  </style>
</head>
<body>
  <div class="boxOut">
  <div class="box">
  </div>
</div>
  <script>
    var box = document.querySelector('.box');
    console.log(box.offsetHeight);
    console.log(document.documentElement.offsetWidth);
    console.log(box.offsetTop);//50
  </script>
</body>
</html>

用上述代码的例子 offsetWidth就是box元素border外边框离boxOut的距离即50（相对于父元素的位置）

offsetLeft同理

3.MouseEvent 事件 --clientX、clientY、pageX、pageY、offsetX、offsetY、x、y

在这里插入图片描述

clientX、clientY

官方解释： MouseEvent.clientX 是只读属性，它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。例如，不论页面是否有水平滚动，当你点击客户端区域的左上角时，鼠标事件的 clientX 值都将为 0 。最初这个属性被定义为长整型（long integer），如今 CSSOM 视图模块将其重新定义为双精度浮点数（double float）。

为鼠标事件的方法:点击位置距离当前body可视化区域的x，y坐标
pageX、pageY

官方解释：**pageX** 是一个由MouseEvent接口返回的相对于整个文档的x（水平）坐标以像素为单位的只读属性。这个属性将基于文档的边缘，考虑任何页面的水平方向上的滚动。举个例子，如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。

起初这个属性被定义为长整型。 CSSOM 视图模块将它重新定位为双浮点数类型。

也为鼠标事件的方法，对于整个页面来说，包括了被卷去的body部分的长度
screenX、screenY

官方解释： screenX 是 MouseEvent 的只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。

理解：点击位置距离当前电脑屏幕的x，y坐标
offsetX、offsetY

MouseEvent 接口的只读属性 offsetX 规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量。
x、y

在这里插入图片描述

梓木Tosikat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
可视化宽度的区别和应用场景

可视化宽度的区别和应用场景1.clientWidth 、clientHeight、clientTop、clientLeft[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vkfQ43JY-1598082266755)(image-20200822140849408.png)]<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta
复制链接

扫一扫