Question

是否可以将元素放置在外部div的内部div中？为澄清模糊的问题，图片提供如下

div http://img600.imageshack.us/img600/8200/45tn.png

在这张照片中。

Big Black Rectangle =外DIV，id =“outer-div”

红色矩形=第一个内部DIV，id =“red-inner-div”

蓝色矩形=第二个内部DIV，id =“blue-inner-div”

有一个textarea放在红色和蓝色div。图中给出了左上角和左上角

假设Red Div中的textarea的ID称为“TA1”，蓝色的ID称为“TA2”。

是否有可能从外部div获得“TA1”或“TA2”的位置？例如，TA2在蓝色内部div中有150的左上角，但是我想知道TA2的顶部和左边是什么，从外部div看来，绝对不是150.

Answer 1

也许......

var offset = { top: 0, left: 0 };
do {
  offset.top += elem.offsetTop;
  offset.left += elem.offsetLeft;

  elem = elem.parentNode;
} while (elem != null && elem.id !== "outer-div");

考虑到如果elem未包含outer-div，则会返回其在文档中的位置。

另一种方法，有点重，但它非常接近jQuery的解决方案：

function getOffset(elem) {
  var offset = elem.getBoundingClientRect();
  var docElem = document.documentElement;

  return {
    top: offset.top + window.pageYOffset - docElem.clientTop,
    left: offset.left + window.pageXOffset - docElem.clientLeft
  };
}

var offsetOuter = getOffset(document.getElementById("outer-div"));
var offsetTextarea = getOffset(document.getElementById("TA1"));

console.log(offsetOuter.left - offsetTextarea.left); // ta-da

我认为你只使用vanilla JS，没有libs（jQuery或其他）。

Answer 2

希望这会有所帮助。

来自外部的位置...

$(function(){
    alert($("#TA1").offset().left-$("#outer-div").offset().left);
    alert($("#TA2").offset().left-$("#outer-div").offset().left);
});

供参考：http://jsfiddle.net/GF9VM/

P.S。同样的方式，你可以获得顶部。

从外部DIv获取元素位置

2 个答案: