前端面试：DOM检测两个div块是否碰撞

前端面试题1：如何判断页面中两个元素是否发生碰撞？

场景：一个container容器中，有两个正方形方块，颜色分别为yellow和blue

主要思路：通过获取元素的offsetLeft、offsetWidth、offsetTop和offsetHeight可以分别获取位置关系，通过以下分别获取两个div的偏移

// L，R，T，B分别表示 div元素的left,right,top,bottom距离父级元素的偏移量

var L = div.offsetLeft;

var R = div.offsetLeft + obj1.offsetWidth;

var T = div.offsetTop;

var B = div.offsetTop + obj1.offsetHeight;

先判断是否接触的逻辑：yellowL表示yellow div元素的左偏移；blueL 表示blue div元素的左偏移；

// yellowR < blueL：yellow右边 在 blue左边 的左方（yellow在blue的左方）

// yellowL > blueR：yellow左边 在 blue右边 的右方（yellow在blue的右方）

// yellowB > blueT：yellow底边 在 blue顶边 的上方（yellow在blue的上方）

// yellowT < blueB：yellow顶边 在 blue底边 的下方（yellow在blue的下方）

// 以上四种情况都表示两个div不会接触，所以不是以上四种情况的情况都会碰撞，代码如下：

if( yellowR < blueL || yellowL > blueR || yellowB > blueT || yellowT < blueB )
{ 
return false;
}
else 
{ 
// 碰撞 
return true;
}

拓展：Js中的div.style.left和div.offsetLeft的区别：

1、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置

• offsetLeft如果父系盒子中都没有定位，以body为准。
• style.left只能获取行内式，如果没有返回“”;

2、offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px

3、offsetLeft 只读，而 style.Left 可读写。（只读是获取值，可写是赋值）

4、如果没有给 HTML 元素指定过Left行内样式，则style.Left返回的是空字符串（重点：style.left只能获取行内式，如果没有返回“”；）