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

---

前言

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

---

html

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

---

JavaScript

let obj = {idElList: [],idEl: [],id: 'id_'
};init();
async function init() {let el = '';for (let i = 0; i < 10; i++) {el += `<div id="${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}</div>`;}el += '<div id="ida" class="item w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 m_t_20">10</div>';el += '<div id="idb" class="item w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 m_t_20">11</div>';el += '<div id="idc" class="item w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 m_t_20">12</div>';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());

---

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对象，其提供了元素的大小及其相对于视口的位置。