JavaScript

DOM

1. Determine whether the DOM element appears in the browser window

.offsetTop of the DOM element to calculate the distance between the top edge of the target element and the top edge of the document document; The.offsetheight of the DOM element calculates the height of the target element. The.pageyoffset of the window element calculates how high the document document is rolled up as the browser scrollbar scrolls; The.innerheight of the window element calculates the height of the window.

  1. Top boundary When an element exits from the top boundary, the condition window.pageYOffset = (p.offset top + P.off set ight)

  2. Lower boundary When an element appears from the lower boundary, the condition window.pageYOffset = P. offsettop-window.innerheight is used

let p = document.querySelector("header")
window.onscroll = function () {
    if (window.pageYOffset > p.offsetTop - window.innerHeight && window.pageYOffset < p.offsetTop + p.offsetHeight) {
        console.log("Header elements are in the browser window.")}else {
        console.log("Header element is not in the browser window.")}}Copy the code

2. Get the background image of the element

GetComputedStyle is a method to get the final CSS attribute values of the current element. The object returned is a CSSStyleDeclaration, read-only.

Parameter analysis:

(1).element: The element object required to get the style value.

(2). PseudoElt: Optional, it indicates the pseudo-element of the specified node (:before, :after, :first-line, :first-letter, etc.).

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