如何在 div 重叠时调用 javascript 函数 div答案

【问题标题】：How can I invoke a javascript function div upon divs overlapping如何在 div 重叠时调用 javascript 函数 div
【发布时间】：2009-07-15 06:41:02
【问题描述】：

我有 2 个 div，一个位于绝对正确的位置：0 和另一个相对定位的中心屏幕。当窗口的宽度太小时，它们会重叠。发生这种情况时如何调用 javascript 函数？

谢谢。迈克

已编辑以使其更清晰。

【问题讨论】：

标签： javascript html css

【解决方案1】：

要检查重叠的 div，您可能需要在页面加载后以及在调整窗口大小时进行检查：

window.onload = checkOverlap;
window.onresize = checkOverlap;

然后使用一些偏移检查：

function checkOverlap() {
   var centerBox = document.getElementById('centerDiv');
   var rightBox = document.getElementById('rightDiv');
   console.log("centerbox offset left: " + centerBox.offsetLeft);
   console.log("centerbox width: " + centerBox.offsetWidth);
   console.log("rightbox offset left: " + rightBox.offsetLeft);
   if ((centerBox.offsetLeft + centerBox.offsetWidth) >= rightBox.offsetLeft) {
      centerBox.style.display = "inline-block";
   } else {
      centerBox.style.display = "block";
   }
}

您可能想在函数中进行更多检查，例如查看该框是否已内联显示，等等。但这应该会给你一个很好的起点。

编辑：添加了一些诊断和修复错误

【讨论】：

这是一个很好的起点！但是，它还没有工作。我想诊断一下。如何使用 alert 向我显示例如 centerBox.offsetLeft 的值？
我的控制台给了我：“类型错误：表达式 'centerBox' [null] 的结果不是一个对象。”有任何想法吗？再次感谢。
console.log("centerBox 向左偏移：" + centerBox.offsetLeft);另外，为您提供更多信息：我正在使用宽度：两个 div 的自动。
尝试在其他日志语句之前添加console.log("centerBox: " + centerBox);。它应该给你[object HTMLDivElement]，如果没有，那么getElementById()-statement 有问题。
这意味着您使用了错误的选择器。您可以将您的 HTML 粘贴到问题区域吗？只是两个 div 的 HTML，带有类名和 ids

【解决方案2】：

第 1 部分：

这样做：

<script type="text/javascript">
document.getElementById('example').style.display = "inline";
</script>

...

<div id="example"> ... </div>

【讨论】：

优秀。这实际上是我展示的图像，但我没有说清楚。剩下要做的就是弄清楚如何检测 div 重叠。
我个人会选择 ...display='inline-block' 而不是 inline ，因为它仍然可以避免重叠，但也会保留它已经拥有的更多其他 CSS 属性。跨度>

【解决方案3】：

document.getElementById('div_id').style.display = 'inline-block'

document.getElementById('div_id').offsetWidth 给我们 div 的宽度

offsetHeight, offsetLeft, offsetTop 也很有用。

【讨论】：