获取div盒子位置（相对父类）

最新推荐文章于 2022-06-11 21:46:33 发布

weixin_43805387

最新推荐文章于 2022-06-11 21:46:33 发布

阅读量771

点赞数

本文链接：https://blog.csdn.net/weixin_43805387/article/details/103236755

版权

本文介绍如何使用JavaScript获取HTML中div元素相对于其父元素的位置，这对于网页布局和交互设计至关重要。通过DOM操作和坐标计算，可以精确地定位并获取div的坐标信息。

摘要由CSDN通过智能技术生成

html

<el-tab-pane label="按模板创建" name="template">

          <div id="showDiv" v-show="isShow" @mouseenter="isShow=true" :style="{left: floatLeft,top: floatTop}"
               style="border-radius:5px;   position: absolute;height: 80px;width: 160px; background-color: white;padding: 10px 5px 5px 15px">
            <p style="font-size: 15px">{{details.detail}}</p>
          </div>

          <el-card :key="index" v-for="(item,index) in cardTemplate" v-if="item.flowInfoEntity.length>0">
            <div slot="header">
              <span> {{item.flowPackageEntity.name}}</span>
            </div>

            <el-col :span="6"  :key="indexInfo" v-for="(itemInfo,indexInfo) in item.flowInfoEntity">
              <el-card style="height: 150px" body-style="height:100%;">
                <div :id="itemInfo.id" @click="intoAnalyse(itemInfo)" @mouseenter="mouseenter($event,itemInfo)" @mouseleave="mouseLeave(itemInfo)">
                  <div style="height: 100px;background-color: #DAE4E4;">
                    <p class="p_svg" style="height: 100%;margin: 0;" v-html='itemInfo.svg'></p>
                  </div>
                </div>
                <div style="height: calc(100% - 100px);display: flex;align-items: center;justify-content: center;">
                  <span> {{itemInfo.id}}</span>
                </div>
              </el-card>
            </el-col>
          </el-card>

        </el-tab-pane>

 mouseenter(e,itemInfo){
        this.details = {};
        this.details.detail = itemInfo.details;
        if(this.details.detail){
          this.isShow = true
        }else{
          this.isShow = false
        }
        var id = itemInfo.id;
        var actualLeft = this.getLeft(id);
        var actualTop = this.getTop(id);

        this.floatLeft = actualLeft-150 + 'px'
        this.floatTop = actualTop-30 + 'px'
        if(e.currentTarget.getBoundingClientRect().right>1300){
          this.floatLeft = actualLeft-350 + 'px'
        }
      },
      getLeft(id){
        var element = document.getElementById(id);
        var actualLeft = element.offsetLeft;
        var current = element.offsetParent;
        while (current !== null){
          actualLeft += current.offsetLeft;
          current = current.offsetParent;
        }
        return actualLeft
      },
      getTop(id){
        var element = document.getElementById(id);
        var actualTop = element.offsetTop;
        var current = element.offsetParent;

        while (current !== null){
          actualTop += current.offsetTop;
          current = current.offsetParent;
        }
        return actualTop;
      },