[前端] 常见问题集合

图片相关

如果是一个div元素显示背景图片，背景图片很大但是div元素比较小，如何让背景图片缩放能够自适应div元素的大小

.qrcode{position: relative;top: 124px;left: 22px;width: 90px;height: 90px;background-image: url(./img/wzry_qrcode.webp); /*400*400大小*/ background-size: cover; /*背景图片缩放自适应盒子的大小 */
}

伪类不生效的情况

<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪类不生效的情况</title><style>.box {width: 100px;height: 100px;background-color: pink;}/* 这里冒号前面不能有空格，否则样式不会生效 */.box :hover {background-color: skyblue;}</style>
</head><body><div class="box"></div>
</body></html>

mouseover/mouseenter; mouseout/mouseleave的区别

mouseover ：如果一个父元素里面有一个子元素，那么当鼠标从外界进入父元素时会触发一次mouseover，此时e.target为父元素，在由父元素进入子元素时又会触发一次mouseover，此时e.target为子元素（有一种冒泡的感觉）
mouseenter: 同上的场景，只有在鼠标进入父元素时才会触发一次
mouseout: 同上的场景，当由鼠标从父元素向外界移动时，会触发一次 e.target为父元素。当鼠标从父元素移动到子元素时触发一次e.target为父元素。当鼠标从子元素移动到父元素时会触发一次e.target为子元素(有一种冒泡的感觉)
mouseleave: 同上的场景，只有鼠标从父元素移动到外界会触发一次，e.target 为子元素。

js判断一个对象属性是否存在

首先要明确存在的定义是什么？
Object.prototype.hasOwnProperty() 即使当属性的值为 undefined 或者 null 时，仍然可以判断如

const user = {name: "libai",age: undefined,gender: null
};
let result = user.hasOwnProperty("age");
console.log(result);//true 属性值为 undefined
let test = user.hasOwnProperty("gender");
console.log(test);//true 属性值为 null
let test2 = user.hasOwnProperty("toString");
console.log(test2); //false Object继承的属性
let test3 = user.hasOwnProperty("father");
console.log(test3); //false 没有该属性