Question

我正在使用IONIC 2.

我想在JS中获得点击元素（div，img，ion-slide，...）的绝对位置。例如，使用下面的代码，DELL XPS 13上Chrome（Desketop）中的绝对位置为X = 1525和Y = -163。我不明白为什么我的图像上的Y位置有负值... 另外，我没有找到一个好的和完整的教程，学习如何在IONIC中使用JS操作HTML / CSS，即使我在基础知识上找到了一些课程，比如修改背景颜色和其他CSS属性。

感谢您的帮助！

HTML：

<ion-content>
  <ion-slides class="image-slider" loop="true" slidesPerView="1">
    <ion-slide *ngFor="let img of pos">
      <img src="assets/imgs/{{ img.URL }}" class="thumb-img" (click)="position($event)">
    </ion-slide>
  </ion-slides>
</ion-content>

JS：

retrievePosition(e) {
  var el = e.currentTarget;
  var position = this.getPosition(el);
  alert(el.tagName + " : X = " + position.x + " ; Y = " + position.y);
}

JS函数getPosition（e）：

getPosition(el) {
    var xPos = 0;
    var yPos = 0;

    while (el) {
      if (el.tagName == "BODY") {
        // deal with browser quirks with body/window/document and page scroll
        var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
        var yScroll = el.scrollTop || document.documentElement.scrollTop;

        xPos += (el.offsetLeft - xScroll + el.clientLeft);
        yPos += (el.offsetTop - yScroll + el.clientTop);
      } else {
        // for all other non-BODY elements
        xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
        yPos += (el.offsetTop - el.scrollTop + el.clientTop);
      }

      el = el.offsetParent;
    }
    return {
      x: xPos,
      y: yPos
    };
}

CSS：

page-gallery {
    .header-item {
        background: transparent;
        border: none;
    }
}

获取当前点击的DOM元素的绝对位置和大小

0 个答案: