Question

如何使用JavaScript或jQuery计算div x和y坐标的左下角。

例如，您如何找到绿色框的左下角？ HTML：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<body>
<div id="result">Click an element.</div>
<p>
  This is the best way to <span>find</span> an offset.
</p>
<div class="abs">
</div>

CSS：

  p {
    margin-left: 10px;
    color: blue;
    width: 200px;
    cursor: pointer;
  }
  span {
    color: red;
    cursor: pointer;
  }
  div.abs {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 220px;
    top: 35px;
    background-color: green;
    cursor: pointer;
  }

JavaScript的：

$( "*", document.body ).click(function( event ) {
  var offset = $( this ).offset();
  event.stopPropagation();
  $( "#result" ).text( this.tagName +
    " coords ( " + offset.left + ", " + offset.top + " )" );
});

链接到JSFiddle示例：http://jsfiddle.net/hfjVQ/

Answer 1

左下角坐标将是偏移顶部位置，加上元素的高度。您可以使用以下内容：

$(this).offset().top + $(this).outerHeight(true);

我们将outerHeight()与true参数一起使用，因为它将计算元素的实际外部高度，包括边框和可能应用的任何边距。

所以你的代码看起来像这样：

$("*", document.body).on('click', function(e) {
    e.stopPropagation();
    var offset = $( this ).offset();

    $( "#result" ).text(this.tagName+" coords ("+offset.left+", "+offset.top+", "+(offset.top + $(this).outerHeight(true))+")");
});

jsFiddle Demo

计算div的左下角

1 个答案: