event、dom 位置信息

最新推荐文章于 2022-02-04 22:37:48 发布

叶子10086

最新推荐文章于 2022-02-04 22:37:48 发布

阅读量164

点赞数

分类专栏：前端菜鸟随笔小记

本文链接：https://blog.csdn.net/iceice_L/article/details/90902485

版权

前端菜鸟同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

随笔小记

8 篇文章 0 订阅

订阅专栏

本文所有属性信息，均在chrome环境下。

一、测试dom

<!DOCTYPE html>
<html lang="zh">
<head>
  <style rel="stylesheet">
    body{
     margin: 0;
    }

    .event{
      width: 200px;
      height: 200px;
      font-size: 50px;
      text-align: right;
      background-color: darkseagreen;
      color: #fff;
      cursor: pointer;
    }

    .o2{
      position: relative;
      top: 30px;
      left: 300px;
    }

    .o3{
      position: absolute;
      top: 50px;
      right: 300px;
    }


    .o4{
      position: relative;
      width: 400px;
      height: 400px;
      background-color: #3a8ee6;
      top: 50px;
      left: 300px;
    }

    .o5{
      position: absolute;
      top: 20px;
      left: 20px;
    }

    .o6{
      position: absolute;
      width: 400px;
      height: 400px;
      background-color: #3a8ee6;
      top: 350px;
      right: 300px;
    }

    .o7{
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  </style>
  <title>test</title>
</head>
<body>
 <div class="event o1">1</div>
 <div class="event o2">2</div>
 <div class="event o3">3</div>

 <div class="event o4">
   4
   <div class="event o5">5</div>
 </div>
 <div class="event o6">
   6
   <div class="event o7">7</div>
 </div>

<script type="application/javascript">
  (function () {
    window.onload = function () {
      let doms = document.getElementsByClassName('event');
      for(let dom of doms){
        dom.addEventListener('click', (e) => {
          console.log(e);
        });
      }

    }
  })();
</script>
</body>
</html>

二、属性位置信息

event

clientX/clientY：鼠标指针相对浏览器内容区域的水平/垂直坐标；
layerX/layerY：鼠标指针相对当前元素的水平/垂直坐标，包括边框；
offsetX/offsetY：鼠标指针相对当前元素的水平/垂直坐标，不包括边框；
pageX/pageY：鼠标指针相对浏览器内容区域的水平/垂直坐标；
screenX/screenY：鼠标指针相对桌面的水平/垂直坐标；

dom

clientWidth/clientHeight：元素宽/高，不包括边框；
clientLeft/clinetTop：元素边框；
offsetWidth/offsetHeight：元素宽/高，包括边框；
offsetLeft/offsetTop：元素距离父级元素水平/垂直坐标。

叶子10086

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
event、dom 位置信息

本文所有属性信息，均在chrome环境下。一、测试dom<!DOCTYPE html><html lang="zh"><head> <style rel="stylesheet"> body{ margin: 0; } .event{ width: 200px; heigh...
复制链接

扫一扫