前端面试题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只能获取行内式,如果没有返回“”;)