JavaScript动态设置浏览器可视区域元素的文字颜色、监听滚动条、querySelectorAll、getBoundingClientRect

---

前言

当元素出现在浏览器可视区域时给元素设置颜色等其他操作，比如当元素进入浏览器可视区域时，设置元素进入动画。

---

html

<div id="idBox" class="box">div>
1

---

JavaScript

let obj = {
    idElList: [],
    idEl: [],
    id: 'id_'
};

init();
async function init() {
    let el = '';

    for (let i = 0; i < 10; i++) {
        el += `
${obj.id}${i}" class="item w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 ${i !== 0 ? 'm_t_20' : ''}">${i}`;
    }

    el += '
10
';
    el += '
11
';
    el += '
12
';

    idBox.innerHTML = el;

    await querySelectorAllId();
    getVisibleElementIds();
}

function querySelectorAllId() {
    let idElList = document.querySelectorAll('*');

    obj.idElList = idElList;

    idElList.forEach(item => {
        if (item.id) obj.idEl.push(item.id);
    });
}

function getVisibleElementIds() {
    let elId = [];

    obj.idElList.forEach(item => {
        const rect = item.getBoundingClientRect();

        // 检查元素是否在可视区域内
        if (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
            item.id
        ) elId.push(item.id);
    });

    elId = elId.filter(item => item.indexOf(obj.id) !== -1);

    for (let i = 0; i < obj.idEl.length; i++) {
        let id = obj.idEl[i],
            idBox = document.getElementById(id);

        idBox.style.color = `#${elId.includes(id) ? 'ff0000' : '333333'}`;
    }
}

// 监听滚动事件
window.addEventListener('scroll', () => getVisibleElementIds());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

---

querySelectorAll

MDN

返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是NodeList 。

---

W3SCHOOL

querySelectorAll()方法返回与指定CSS选择器匹配的元素的子元素的集合，以静态NodeList对象。
NodeList是类数组的节点集合（列表）。
列表中的节点可以通过索引（下标）访问。索引从0开始。
length属性可返回列表中的节点数。

---

getBoundingClientRect

w3school

getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
getBoundingClientRect()方法返回的是拥有八个属性的DOMRect对象：
left
top
right
bottom
x
y
width
height
提示：已经完成的滚动也算在内。这意味着每次滚动位置更改时，矩形的边缘（top、left、bottom以及right）都会更改其值。

---

MDN

Element.getBoundingClientRect()方法返回一个DOMRect对象，其提供了元素的大小及其相对于视口的位置。