Как я могу вызвать функцию Javascript div при наложении div

Question

У меня есть 2 деления, одно из которых расположено абсолютно правильно: 0, а другое относительно расположено в центре экрана Когда ширина окна слишком мала, они перекрываются. Как я могу вызвать функцию javascript, когда это происходит?

Спасибо. Mike

Отредактировано, чтобы сделать более понятным.

Answer 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";
   }
}

Возможно, вы захотите сделать еще несколько проверок в функции, например, чтобы увидеть, если окно уже отображается в строке, и тому подобное. Но это должно дать вам хорошее место для начала.

edit: добавлена ​​некоторая диагностика и исправлена ​​ошибка

Answer 2

Часть 1:

Сделай так:

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

...

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

Answer 3

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

document.getElementById('div_id').offsetWidth дает нам ширину div

offsetHeight, offsetLeft, offsetTop также полезны.