当前位置: 首页 > news >正文

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

相关文章:

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

文章目录 前言htmlJavaScriptquerySelectorAllgetBoundingClientRect 前言 当元素出现在浏览器可视区域时给元素设置颜色等其他操作&#xff0c;比如当元素进入浏览器可视区域时&#xff0c;设置元素进入动画。 html <div id"idBox" class"box"><…...

意向客户的信息获取到底是怎样的,快来get一下

客户信息获取技术真的可以为企业提供精准客源吗&#xff1f;这个渠道到底安不安全&#xff0c;技术到底成不成熟&#xff1f;效果到底如何&#xff1f;下面简单的和大家分析一下。 客户信息获取技术是怎样的 手机采集引流方面&#xff0c;上量不精准&#xff0c;精准不上量的说…...

自动化测试常用脚本语言有哪些?

在自动化测试中&#xff0c;常用的脚本语言包括&#xff1a; 1. Python&#xff1a;Python是一个简洁、易读且功能强大的脚本语言&#xff0c;广泛应用于自动化测试领域。它具有丰富的测试框架和库&#xff0c;可以用于Web、移动应用和API等各种类型的测试。 2. Java&#xff1…...

mapreduce 的工作原理以及 hdfs 上传文件的流程

推荐两篇博文 mapreduce 的工作原理&#xff1a; 图文详解 MapReduce 工作流程_mapreduce工作流程_Shockang的博客-CSDN博客 hdfs 上传文件的流程 HDFS原理 - 知乎...

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清华镜像站…...

uniapp - 倒计时组件-优化循环时间倒计时

使用定时器的规避方法 为了避免定时器误差导致倒计时计算错误&#xff0c;可以采用一些规避方法&#xff0c;比如将倒计时被中断时的剩余时间记录下来&#xff0c;重新开启定时器时再将这个剩余时间加到新的计算中。同时&#xff0c;为了避免定时器延迟&#xff0c;可以在每次执…...

java 实现访问者模式

访问者模式是一种行为设计模式&#xff0c;它允许您在不修改对象结构的情况下&#xff0c;向对象结构中的元素添加新的操作。这通常用于解决对象结构中元素类型多变&#xff0c;但操作类型相对稳定的问题。在访问者模式中&#xff0c;我们有一个访问者接口和多个具体的元素类&a…...

JDK源码剖析之PriorityQueue优先级队列

写在前面 版本信息&#xff1a; JDK1.8 PriorityQueue介绍 在数据结构中&#xff0c;队列分为FIFO、LIFO 两种模型&#xff0c;分别为先进先出&#xff0c;后进后出、先进后出&#xff0c;后进先出&#xff08;栈&#xff09; 而一切数据结构都是基于数组或者是链表实现。 在…...

TSINGSEE青犀AI视频分析/边缘计算/AI算法·人脸识别功能——多场景高效运用

旭帆科技AI智能分析网关可提供海量算法供应&#xff0c;涵盖目标监测、分析、抓拍、动作分析、AI识别等&#xff0c;可应用于各行各业的视觉场景中。同时针对小众化场景可快速定制AI算法&#xff0c;主动适配大厂近百款芯片&#xff0c;打通云/边/端灵活部署&#xff0c;算法一…...

力扣(LeetCode)算法_C++——最大连续 1 的个数 III

给定一个二进制数组 nums 和一个整数 k&#xff0c;如果可以翻转最多 k 个 0 &#xff0c;则返回 数组中连续 1 的最大个数 。 示例 1&#xff1a; 输入&#xff1a;nums [1,1,1,0,0,0,1,1,1,1,0], K 2 输出&#xff1a;6 解释&#xff1a;[1,1,1,0,0,1,1,1,1,1,1] 粗体数字…...

23062C++QT day2

封装一个结构体&#xff0c;结构体中包含一个私有数组&#xff0c;用来存放学生的成绩&#xff0c;包含一个私有变量&#xff0c;用来记录学生个数&#xff0c; 提供一个公有成员函数&#xff0c;void setNum(int num)用于设置学生个数 提供一个公有成员函数&#xff1a;void…...

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}}>…...

大数据安全 | (一)介绍

目录 &#x1f4da;大数据安全 &#x1f407;大数据安全内涵 &#x1f407;大数据安全威胁 &#x1f407;保障大数据安全 ⭐️采集环节安全技术 ⭐️存储环节安全技术 ⭐️挖掘环节安全技术 ⭐️发布环节安全技术 &#x1f407;大数据用于安全 &#x1f4da;隐私及其…...

软件工程的概念及其重要性

软件工程是指将工程原理和方法应用于软件开发过程的学科&#xff0c;涉及软件的设计、开发、测试、维护和管理等各个阶段。它旨在提高软件开发的效率和质量&#xff0c;并确保软件满足用户的需求和预期。 软件工程的重要性体现在以下几个方面&#xff1a; 提高开发效率&#x…...

[足式机器人]Part3 变分法Ch01-2 数学预备知识——【读书笔记】

本文仅供学习使用 本文参考&#xff1a; 《变分法基础-第三版》老大中 《变分学讲义》张恭庆 《Calculus of Variations of Optimal Control Theory》-变分法和最优控制论-Daneil Liberzon Ch01-2 数学基础-预备知识1 1.3.2 向量场的通量和散度1.3.3 高斯定理与格林公式 1.3.2 …...

【嵌入式开发 Linux 常用命令系列 7.1 -- awk 过滤列中含有特定字符的行】

文章目录 awk 过滤列中字符串 上篇文章:嵌入式开发 Linux 常用命令系列 7 – awk 常用方法详细介绍 awk 过滤列中字符串 cat test.log | awk -F $31 {print $0}说明&#xff1a; -F 以什么分隔列&#xff0c;这里是以空格为分隔符&#xff1b;$3代表第3列&#xff1b;$3…...

前端(十六)——Web应用的安全性研究

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;Web应用的安全性研究 文章目录 概述常见前端安全漏洞XSS&#xff08;跨站脚本攻击&#xff09;CSRF&#xff08;跨站请求伪造&#xff09; 点击劫持安全性验证与授权用户身份验证授权与权限管理 安全…...

无涯教程-JavaScript - BIN2HEX函数

描述 BIN2HEX函数将二进制数转换为十六进制。 语法 BIN2HEX (number, [places])争论 Argument描述Required/Optionalnumber 您要转换的二进制数。 数字不能超过10个字符(10位)。数字的最高有效位是符号位。其余的9位是幅度位。 负数使用二进制补码表示。 Requiredplaces 要…...

Kafka环境搭建与相关启动命令

一、Kafka环境搭建 点击下载kafka_2.11-2.3.1.tgz文件链接 1、上传kafka_2.11-2.3.1.tgz&#xff0c;解压kafka_2.11-2.3.1.tgz&#xff0c;得到kafka_2.11-2.3.1文件夹 1&#xff09;上传 #使用mobaxterm将 kafka_2.11-2.3.1.tgz 传入tools文件夹 #用下面代码进入tools文件…...

【C++】类的封装 ② ( 封装最基本的表层概念 | 类对象作为参数传递的几种情况 )

文章目录 一、类的封装 : 将数据和方法封装到一个类中1、封装最基本的表层概念2、代码分析 - 基本封装3、代码分析 - 类对象作为参数传递的几种情况 ( 指针 / 引用 / 直接 )4、完整代码示例 一、类的封装 : 将数据和方法封装到一个类中 1、封装最基本的表层概念 将数据和方法封…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

用机器学习破解新能源领域的“弃风”难题

音乐发烧友深有体会&#xff0c;玩音乐的本质就是玩电网。火电声音偏暖&#xff0c;水电偏冷&#xff0c;风电偏空旷。至于太阳能发的电&#xff0c;则略显朦胧和单薄。 不知你是否有感觉&#xff0c;近两年家里的音响声音越来越冷&#xff0c;听起来越来越单薄&#xff1f; —…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...