0

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

div

在这幅图片中。

大黑矩形 = 外 DIV , id = "outer-div"

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

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

有一个 textarea 放置在红色和蓝色的 div 中。图片中给出了顶部和左侧

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

是否可以从外部div获得“TA1”或“TA2”的位置？比如 TA2 在 blue-inner-div 里面有 top and left of 150，但是我想知道从 outer-div 看 TA2 的 top 和 left 是什么，肯定不是 150。

4

2 回答 2

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

我认为你只使用香草 JS，没有库（jQuery 或其他）。

于 2013-10-11T17:52:04.670 回答
0

希望这会有所帮助。

来自外部 div 的位置...

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

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

PS同样的方式，你可以得到顶部。

于 2013-10-11T18:15:46.280 回答