龙港做网页网站制作,中国建筑官网超高层,淘客推广软件,福州网签查询系统文章目录 前言htmlJavaScriptquerySelectorAllgetBoundingClientRect 前言 当元素出现在浏览器可视区域时给元素设置颜色等其他操作#xff0c;比如当元素进入浏览器可视区域时#xff0c;设置元素进入动画。 html
div ididBox classbox比如当元素进入浏览器可视区域时设置元素进入动画。 html
div ididBox classbox/divJavaScript
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} classitem 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 idida classitem w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 m_t_2010/div;el div ididb classitem w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 m_t_2011/div;el div ididc classitem w_200 h_130 lh_130 ta_c fs_36 b_5s_rgba_00_255_07 m_t_2012/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对象其提供了元素的大小及其相对于视口的位置。
