大佬教程收集整理的这篇文章主要介绍了使用 JavaScript 条件向 HTML 部分添加更改，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我有一个单部分网站，在向下滚动（隐藏上一部分）时会显示部分（关于、服务等）。 我如何使用 JavaScript 代码在显示每个部分时添加 CSS 更改（更改如：显示/隐藏某个徽标、更改主菜单中该部分活动文本的颜色、更改导航菜单的颜色等？ 我的意思是：如果这个部分被选中（使用菜单或导航栏）/滚动到（鼠标滚动），那么做 CSS 更改 有什么帮助吗？
类似网站：https://bratsun.com/#Hello
如果元素在视口中，您可以观看这些元素。 这可能会有所帮助：How can I tell if a DOM element is visible in the current viewport?
如果元素在视口中，则向相应的导航项添加一个类（例如“活动”）
,一个演示 Web 视图，可在标题菜单后向下和向上滚动。该页面没有响应，但您可以将其作为示例来设置更好的页面。
如您所见，function goToSectionPage 负责执行事件以滚动到愿望部分。
另外，你可以优化js代码中function addEventHandlerToHeaderButton的重复。
function goToSectionPage(sectionElement) {
sectionElement.scrollIntoView({ behavior: "smooth",block: "center" });
}
function addEventHandlerToHeaderButton(buttonId,sectionId) {
const buttonTarget = document.getElementById(buttonId);
buttonTarget.addEventListener("click",function () {
const parentSectionElement = document.querySELEctor("main");
const targetSection = document.getElementById(sectionId);
goToSectionPage(targetSection);
addCssClassToSELEcedtSession(parentSectionElement,targetSection,"SELEcted");
});
}
function addCssClassToSELEcedtSession(parentWrapSectionElements,SELEctedSectionElement,className) {
for(let section of parentWrapSectionElements.children){
section.classList.remove(className)
}
SELEctedSectionElement.classList.add(className)
}
addEventHandlerToHeaderButton("headerSection1","section1");
addEventHandlerToHeaderButton("headerSection2","section2");
addEventHandlerToHeaderButton("headerSection3","section3");
addEventHandlerToHeaderButton("headerSection4","section4");
addEventHandlerToHeaderButton("headerSection5","section5");
addEventHandlerToHeaderButton("headerSection6","section6");
addEventHandlerToHeaderButton("headerSection7","section7");
addEventHandlerToHeaderButton("headerAbout","about");.section {
display: block;
height: 50px;
border: 1px solid black;
border-radius: 5px;
margin-bottom: 10px;
padding: 5px;
}
.header-item {
@R_801_10930@or: pointer;
padding: 0 8px;
font-family: system-ui;
font-size: 10px;
color: #00000080;
}
.header-item:hover {
border-bottom: 1px solid black;
}
header {
width: 100%;
position: fixed;
}
main {
padding-top: 45px;
}
.SELEcted {
animation: sectionSELEcted 2s forWARDs;
}
@keyframes sectionSELEcted {
from {
BACkground-color: #fff;
}
to {
BACkground-color: #c4c4c4;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Test</title>
<link rel="stylesheet" href="./stackoverflow.css">
</head>
<body>
<header>
<span id="headerSection1" class="header-item">Go to Section 1</span>
<span id="headerSection2" class="header-item">Go to Section 2</span>
<span id="headerSection3" class="header-item">Go to Section 3</span>
<span id="headerSection4" class="header-item">Go to Section 4</span>
<span id="headerSection5" class="header-item">Go to Section 5</span>
<span id="headerSection6" class="header-item">Go to Section 6</span>
<span id="headerSection7" class="header-item">Go to Section 7</span>
<span id="headerAbout" class="header-item">Go to About</span>
</header>
<main>
<section id="section1" class="section">Section1</section>
<section id="section2" class="section">Section2</section>
<section id="section3" class="section">Section3</section>
<section id="section4" class="section">Section4</section>
<section id="section5" class="section">Section5</section>
<section id="section6" class="section">Section6</section>
<section id="section7" class="section">Section7</section>
<section id="about" class="section">About</section>
</main>
</body>
<script src="./stackoverflow.js"></script>
</html>
https://github.com/stembrino/simple-page-example-scroll-down-up
,您正在寻找 IntersectionObserver API。
这是一个 educational youtube video on IntersectionObserver V1。
对于某些极端情况，IntersectionObserver V2 已在 Chrome 中指定和实现。
以上是大佬教程为你收集整理的使用 JavaScript 条件向 HTML 部分添加更改全部内容，希望文章能够帮你解决使用 JavaScript 条件向 HTML 部分添加更改所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。