JavaScript

DOM

1. 判断DOM元素是否出现在浏览器窗口中

DOM元素的 .offsetTop 来计算目标元素的顶部边界到document文档的顶部边界的距离；DOM元素的 .offsetHeight 来计算目标元素的高度；window元素的 .pageYoffset 来计算当浏览器滚动条滚动时document文档卷起的高度；window元素的.innerHeight 来计算窗口的高度。

1. 上边界 当元素从上边界离开时，条件 window.pageYOffset = (p.offsetTop + p.offsetHeight)

2. 下边界 当元素从下边界出现时，条件 window.pageYOffset = p.offsetTop - window.innerHeight

let p = document.querySelector("header")
window.onscroll = function () {
    if (window.pageYOffset > p.offsetTop - window.innerHeight && window.pageYOffset < p.offsetTop + p.offsetHeight) {
        console.log("header元素在浏览器窗口内")
    } else {
        console.log("header元素不在浏览器窗口内")
    }
}

2. 获取元素的背景图片

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值的方法。返回的是一个CSS样式声明对象(object CSSStyleDeclaration)，只读。

参数解析:

（1）.element：必需，要获取样式值的元素对象。

（2）.pseudoElt：可选，表示指定节点的伪元素（:before、:after、:first-line、:first-letter等）。

window.onload = function () {
	let p = getComputedStyle(document.querySelector("h1")).backgroundImage
	console.log(p)
}