JavaScript动态设置浏览器可视区域元素的文字颜色、监听滚动条、querySelectorAll、getBoundingClientRect
文章目录
- 前言
- html
- 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对象,其提供了元素的大小及其相对于视口的位置。
相关文章:
![](https://www.ngui.cc/images/no-images.jpg)
JavaScript动态设置浏览器可视区域元素的文字颜色、监听滚动条、querySelectorAll、getBoundingClientRect
文章目录 前言htmlJavaScriptquerySelectorAllgetBoundingClientRect 前言 当元素出现在浏览器可视区域时给元素设置颜色等其他操作,比如当元素进入浏览器可视区域时,设置元素进入动画。 html <div id"idBox" class"box"><…...
![](https://img-blog.csdnimg.cn/img_convert/e18ab3db5d8bf3b16aa76f38fbe656af.png)
意向客户的信息获取到底是怎样的,快来get一下
客户信息获取技术真的可以为企业提供精准客源吗?这个渠道到底安不安全,技术到底成不成熟?效果到底如何?下面简单的和大家分析一下。 客户信息获取技术是怎样的 手机采集引流方面,上量不精准,精准不上量的说…...
![](https://www.ngui.cc/images/no-images.jpg)
自动化测试常用脚本语言有哪些?
在自动化测试中,常用的脚本语言包括: 1. Python:Python是一个简洁、易读且功能强大的脚本语言,广泛应用于自动化测试领域。它具有丰富的测试框架和库,可以用于Web、移动应用和API等各种类型的测试。 2. Java࿱…...
![](https://www.ngui.cc/images/no-images.jpg)
mapreduce 的工作原理以及 hdfs 上传文件的流程
推荐两篇博文 mapreduce 的工作原理: 图文详解 MapReduce 工作流程_mapreduce工作流程_Shockang的博客-CSDN博客 hdfs 上传文件的流程 HDFS原理 - 知乎...
![](https://www.ngui.cc/images/no-images.jpg)
Ubuntu22.04安装ROS2
Ubuntu22.04安装ROS2 Excerpt ROS2官方文档 ROS2清华镜像站sudo apt update sudo apt upgrade locale # check for UTF-8 sudo apt update && sudo apt install locales sudo locale-gen en_US en_US.UTF-8 sudo update-locale LC_ALLe… ROS2官方文档 ROS2清华镜像站…...
![](https://img-blog.csdnimg.cn/1c4c85df70f24b51bef8c65cdbae3fa7.png)
uniapp - 倒计时组件-优化循环时间倒计时
使用定时器的规避方法 为了避免定时器误差导致倒计时计算错误,可以采用一些规避方法,比如将倒计时被中断时的剩余时间记录下来,重新开启定时器时再将这个剩余时间加到新的计算中。同时,为了避免定时器延迟,可以在每次执…...
![](https://www.ngui.cc/images/no-images.jpg)
java 实现访问者模式
访问者模式是一种行为设计模式,它允许您在不修改对象结构的情况下,向对象结构中的元素添加新的操作。这通常用于解决对象结构中元素类型多变,但操作类型相对稳定的问题。在访问者模式中,我们有一个访问者接口和多个具体的元素类&a…...
![](https://img-blog.csdnimg.cn/33e24602022840ceb2b4311d27274d3a.png)
JDK源码剖析之PriorityQueue优先级队列
写在前面 版本信息: JDK1.8 PriorityQueue介绍 在数据结构中,队列分为FIFO、LIFO 两种模型,分别为先进先出,后进后出、先进后出,后进先出(栈) 而一切数据结构都是基于数组或者是链表实现。 在…...
![](https://img-blog.csdnimg.cn/img_convert/8705738a76e4a0b774eb9ba21ce9a3b4.png)
TSINGSEE青犀AI视频分析/边缘计算/AI算法·人脸识别功能——多场景高效运用
旭帆科技AI智能分析网关可提供海量算法供应,涵盖目标监测、分析、抓拍、动作分析、AI识别等,可应用于各行各业的视觉场景中。同时针对小众化场景可快速定制AI算法,主动适配大厂近百款芯片,打通云/边/端灵活部署,算法一…...
![](https://www.ngui.cc/images/no-images.jpg)
力扣(LeetCode)算法_C++——最大连续 1 的个数 III
给定一个二进制数组 nums 和一个整数 k,如果可以翻转最多 k 个 0 ,则返回 数组中连续 1 的最大个数 。 示例 1: 输入:nums [1,1,1,0,0,0,1,1,1,1,0], K 2 输出:6 解释:[1,1,1,0,0,1,1,1,1,1,1] 粗体数字…...
![](https://img-blog.csdnimg.cn/4e78b16d6861453e97db35c44cf2c215.png)
23062C++QT day2
封装一个结构体,结构体中包含一个私有数组,用来存放学生的成绩,包含一个私有变量,用来记录学生个数, 提供一个公有成员函数,void setNum(int num)用于设置学生个数 提供一个公有成员函数:void…...
![](https://img-blog.csdnimg.cn/abe0f19768154f95af156729d9fea0bc.png)
React三属性之:props
作用 将父组件的参数传递给子组件 父组件 import ./App.css; import React from react; import PropsTest from ./pages/propsTest class App extends React.Component{render(){return(<div><h2>App组件</h2><PropsTest obj{{name:王惊涛,age:27}}>…...
![](https://img-blog.csdnimg.cn/381e278b61a949d9bbbc23bcfad93b38.png)
大数据安全 | (一)介绍
目录 📚大数据安全 🐇大数据安全内涵 🐇大数据安全威胁 🐇保障大数据安全 ⭐️采集环节安全技术 ⭐️存储环节安全技术 ⭐️挖掘环节安全技术 ⭐️发布环节安全技术 🐇大数据用于安全 📚隐私及其…...
![](https://www.ngui.cc/images/no-images.jpg)
软件工程的概念及其重要性
软件工程是指将工程原理和方法应用于软件开发过程的学科,涉及软件的设计、开发、测试、维护和管理等各个阶段。它旨在提高软件开发的效率和质量,并确保软件满足用户的需求和预期。 软件工程的重要性体现在以下几个方面: 提高开发效率&#x…...
![](https://img-blog.csdnimg.cn/79d2bce6f6084624a10e8b7e49babd4c.png)
[足式机器人]Part3 变分法Ch01-2 数学预备知识——【读书笔记】
本文仅供学习使用 本文参考: 《变分法基础-第三版》老大中 《变分学讲义》张恭庆 《Calculus of Variations of Optimal Control Theory》-变分法和最优控制论-Daneil Liberzon Ch01-2 数学基础-预备知识1 1.3.2 向量场的通量和散度1.3.3 高斯定理与格林公式 1.3.2 …...
![](https://img-blog.csdnimg.cn/e68159db000e404a9e972412718728e2.png)
【嵌入式开发 Linux 常用命令系列 7.1 -- awk 过滤列中含有特定字符的行】
文章目录 awk 过滤列中字符串 上篇文章:嵌入式开发 Linux 常用命令系列 7 – awk 常用方法详细介绍 awk 过滤列中字符串 cat test.log | awk -F $31 {print $0}说明: -F 以什么分隔列,这里是以空格为分隔符;$3代表第3列;$3…...
![](https://img-blog.csdnimg.cn/99411a2e01f64456b912857473a5925c.gif#pic_center)
前端(十六)——Web应用的安全性研究
🙂博主:小猫娃来啦 🙂文章核心:Web应用的安全性研究 文章目录 概述常见前端安全漏洞XSS(跨站脚本攻击)CSRF(跨站请求伪造) 点击劫持安全性验证与授权用户身份验证授权与权限管理 安全…...
![](https://img-home.csdnimg.cn/images/20230724024159.png?be=1&origin_url=https://www.learnfk.com/guide/images/wuya.png)
无涯教程-JavaScript - BIN2HEX函数
描述 BIN2HEX函数将二进制数转换为十六进制。 语法 BIN2HEX (number, [places])争论 Argument描述Required/Optionalnumber 您要转换的二进制数。 数字不能超过10个字符(10位)。数字的最高有效位是符号位。其余的9位是幅度位。 负数使用二进制补码表示。 Requiredplaces 要…...
![](https://img-blog.csdnimg.cn/810b586d4a224e1891f0694214d4d0aa.png)
Kafka环境搭建与相关启动命令
一、Kafka环境搭建 点击下载kafka_2.11-2.3.1.tgz文件链接 1、上传kafka_2.11-2.3.1.tgz,解压kafka_2.11-2.3.1.tgz,得到kafka_2.11-2.3.1文件夹 1)上传 #使用mobaxterm将 kafka_2.11-2.3.1.tgz 传入tools文件夹 #用下面代码进入tools文件…...
![](https://img-blog.csdnimg.cn/e8b351e183e04aac98ec3721b3876148.png)
【C++】类的封装 ② ( 封装最基本的表层概念 | 类对象作为参数传递的几种情况 )
文章目录 一、类的封装 : 将数据和方法封装到一个类中1、封装最基本的表层概念2、代码分析 - 基本封装3、代码分析 - 类对象作为参数传递的几种情况 ( 指针 / 引用 / 直接 )4、完整代码示例 一、类的封装 : 将数据和方法封装到一个类中 1、封装最基本的表层概念 将数据和方法封…...
![](https://img-blog.csdnimg.cn/3ba2d8f30e9e461c87d2d05744240ada.png)
Linux上安装FTP
1、登录FTP,执行安装命令 yum -y install vsftpd 2、启动FTP服务器,设置开启自启动 systemctl enable vsftpd.service systemctl start vsftpd.service systemctl status vsftpd.service #查看状态, 显示active说明FTP启动成功 3、修改FTP配置文件/et…...
![](https://www.ngui.cc/images/no-images.jpg)
C/C++使用GDAL库编程窍门之——通用可移植性库(Common Portability Library, CPL)
C/C使用GDAL库编程窍门之——通用可移植性库(Common Portability Library, CPL) CPL简介 GDAL全称地理空间数据抽象库(Geospatial Data Abstraction Library),是一个强大的地理栅格空间数据转换库,支持众…...
![](https://www.ngui.cc/images/no-images.jpg)
Linux container_of() 宏定义
container_of 宏 今天遇到了一段这样的代码,大致意思是 通过该struct结构体变量的成员的地址来反推该struct结构体变量的地址 并且用到了内核的宏,container_of() static inline struct nova_inode_info *NOVA_I(struct inode *inode) {return container…...
![](https://www.ngui.cc/images/no-images.jpg)
详解python中的序列类型---列表list
概述 列表类型是包含0个或多个元素的有序序列,属于序列类型。列表可以进行元素的增加、删除、替换、查找等操作。列表没有长度限制,无素类型可以不同,不需要预定长度。 列表类型用中括号[]表示,也可以通过list(x)函数将集合或字…...
![](https://img-blog.csdnimg.cn/img_convert/cb43bf57fd3effe1cafd9dbff45621ea.webp?x-oss-process=image/format,png)
Unity 引擎中国版 “团结引擎” 发布
导读Unity 官方宣布,Unity 中国正式推出 Unity 中国版引擎 —— 团结引擎,同时也开启了 Unity 中国本土化进程的全新篇章。作为推动团结引擎落地的核心人物,Unity 中国 CEO 张俊波称致力于将其打造为一款更懂中国开发者的引擎。 团结引擎以 U…...
![](https://img-blog.csdnimg.cn/img_convert/89c4f4feedef56148c9274ed2e27f691.png)
MindsDB为许多不支持内置机器学习的数据库带来了机器学习功能
选择平台的首要原则是“靠近数据”,让代码靠近数据是保持低延迟的必要条件。 机器学习,特别是深度学习往往会多次遍历所有数据(遍历一次被称为一个epoch)。对于非常大的数据集来说,理想的情况是在存储数据的地方建立模型,这样就不需要大量的数据传输。目前已经有部分数据…...
![](https://img-blog.csdnimg.cn/ecbf701bb1564cbfbe5ebd5d5db67156.png)
世界级黑客丨电脑犯罪界的汉尼拔
被美国FBI称为电脑界的汉尼拔的人,有什么样的故事? 这个人就是世界级黑客凯文李波尔森,他在早期是正儿八经的黑客,他在17岁的时候就使用TRS-80电脑攻入美国国防部的高等研究计划署网络,但是当时他进去啥也没干&#x…...
![](https://img-blog.csdnimg.cn/064f5785861a4723a6b6e679f4963e78.png)
【Matlab】Matlab实现数据的动态显示方法
Matlab实现数据的动态显示方法 主要为大家详细介绍了Matlab使用Plot函数实现数据动态显示方法,具有一定的参考价值,感兴趣的小伙伴们可 以参考一下 对于真实系统或者仿真平台,数据是增量式的产生的。Matlab除了强大的矩阵运算外,还…...
![](https://img-blog.csdnimg.cn/736a1b7f9c354fdf96bd0c1914c41f51.png)
【Android】SDK安装及配置
一、下载SDK Tools https://www.androiddevtools.cn 以windows10系统为例,下载压缩版直接解压即可。 二、安装SDK Tools 解压后双击运行SDK Manager.exe 一般根据默认推荐安装即可。 如果无法打开SDK Manager,可以参考:https://blog.cs…...
![](https://img-blog.csdnimg.cn/img_convert/98cb9a67837a3192b78b2861e6ac66d2.png)
ETCD详解
一、etcd概念 ETCD 是一个高可用的分布式键值key-value数据库,可用于服务发现。 ETCD 采用raft 一致性算法,基于 Go语言实现。 etcd作为一个高可用键值存储系统,天生就是为集群化而设计的。由于Raft算法在做决策时需要多数节点的投票&…...
![](/images/no-images.jpg)
国外扁平化网站/编写网页的软件
关于VIEW 登陆后 键盘无法输入的问题。主要因为使用了360防火墙的缘故! PCOIP为VMware私有协议,不在360信任列表。使用RDP方式没有此问题。 解决方法有两种:1.打开360安全卫士,进入木马防火墙————关闭键盘记录防护 ÿ…...
![](/images/no-images.jpg)
网站服务器迁移步骤/小说推广平台有哪些
代理模式的定义是:为一个对象提供代理,来控制对这个对象的访问。 在某些情况下,直接访问对象不方便或者对访问对象增强一些功能,可以使用到代理模式。比如想请一个明星来办一场商业演出,一般都是联系明星的经纪人&…...
![](https://img-blog.csdnimg.cn/fc312230fc424428a3ed52e705e1a56d.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ2MTYyMzIx,size_16,color_FFFFFF,t_70)
asp.net网站怎么做/网页制作工具
一、Docker架构 Docker 包括三个基本概念: 镜像(Image):Docker 镜像(Image),就相当于是一个 root 文件系统。比如官方镜像 ubuntu:16.04 就包含了完整的一套 Ubuntu16.04 最小系统的 root 文件系统。 容器…...
![](/images/no-images.jpg)
易语言可以做网站后端/央视新闻
docker私服搭建有官方的registry镜像,也有改版后的NexusOss3.x,因为maven的原因搭建了nexus,所以一并将docker私服也搭建到nexus上。 nexus的安装过程就单独说了,如果是2.x系列需要升级到2.14版本再升级到3.y系列,如果…...
![](/images/no-images.jpg)
海外网站建设/百度导航如何设置公司地址
上一篇文章中讲解了UE4中对类(UCLASS)的反射支持,这篇文章我们还是以实例的形式来讲解虚幻4对结构体(USTRUCT)以及枚举(UENUM)的支持。 结构体 首先让我们看一下测试结构体反射支持的代码&#…...
![](/images/no-images.jpg)
做门户网站起什么域名好/网站seo优化工具
本文研究全球与中国市场包装用铝盖的发展现状及未来发展趋势,分别从生产和消费的角度分析包装用铝盖的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产…...