企业官网建设流程全解析

北京正规网站建设有几种,建设银行网站怎样查询贷款信息吗,山东省城乡建设部网站,网站上面的体验卡怎么做文章目录一、Element.classList 操作 DOM 元素 类名集合1、Element.classList 核心概念2、添加类名 - add 函数3、移除类名 - remove 函数4、切换类名 - toggle 函数5、判断类名是否存在 - contains 函数二、代码示例 - Element.classList 操作 DOM 元素 类名集合1、代码示例2、…文章目录一、Element.classList 操作 DOM 元素 类名集合1、Element.classList 核心概念2、添加类名 - add 函数3、移除类名 - remove 函数4、切换类名 - toggle 函数5、判断类名是否存在 - contains 函数二、代码示例 - Element.classList 操作 DOM 元素 类名集合1、代码示例2、执行结果一、Element.classList 操作 DOM 元素 类名集合1、Element.classList 核心概念Element.classList 是 每个 DOM 都具有的属性, 该属性 用于获取 DOM 元素的 CSS 类名集合 ;借助 该属性 ,避免了 className 操作的繁琐的字符串拼接 / 空格处理 操作 ,Element.classList 提供了 一系列的 方法 ,实现 DOM 元素 类名的 增删改查 操作 ;Element.classList 返回的是一个DOMTokenList 类型的集合对象, 该对象具有类似数组的特性,有 length 属性,可通过 for…of 迭代, 但并非真正的数组 ,无法直接使用数组的 map、filter 等方法 ;2、添加类名 - add 函数Element.classList # add () 函数 添加类名语法 :element.classList.add(className1,className2,...)该函数作用是给元素添加 一个 或 多个 CSS 类名,重复添加 同一个类名 不会报错 会 自动去重 ;代码示例 :// 获取 DOM 元素constboxdocument.getElementById(box);// 添加单个类名box.classList.add(shadow);// 添加多个类名逗号分隔box.classList.add(flex,center);// 最终元素类名 : shadow flex center3、移除类名 - remove 函数Element.classList # remove () 函数 添加类名语法 :element.classList.remove(className1,className2,...)该函数 用于从元素上 移除 一个或多个 CSS 类名,移除不存在的类名 无任何效果 且 不会报错 ;代码示例 :// 获取 DOM 元素constboxdocument.getElementById(box);// 添加单个类名box.classList.add(shadow,flex);// 移除多个类名逗号分隔box.classList.remove(flex,center);// 最终元素类名 : shadow4、切换类名 - toggle 函数Element.classList # toggle () 函数 添加类名语法 :基础切换 :类名存在 则 移除原有类名 , 不存在则添加, 类似开关效果 ;element.classList.toggle(className)强制切换 :第二个参数force 为布尔值 , true 强制添加类名 , false 强制移除类名 ;element.classList.toggle(className,force)代码示例 :// 获取 DOM 元素constboxdocument.getElementById(box);// 基础切换active 存在则移除不存在则添加box.classList.toggle(active);// 强制切换true 强制添加 active无论是否存在box.classList.toggle(active,true);// 强制切换false 强制移除 active无论是否存在box.classList.toggle(active,false);5、判断类名是否存在 - contains 函数Element.classList # toggle () 函数 添加类名语法 :element.classList.contains(className)判断元素是否包含指定 CSS 类名 ,返回布尔值 ,返回 true 存在类名 , 返回 false 不存在类名 ;代码示例 :// 获取 DOM 元素constboxdocument.getElementById(box);// 判断是否包含 container 类名consthasContainerbox.classList.contains(container);console.log(hasContainer);// true// 判断是否包含 active 类名consthasActivebox.classList.contains(active);console.log(hasActive);// false若已移除二、代码示例 - Element.classList 操作 DOM 元素 类名集合1、代码示例!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titleclassList 实战案例/titlestyle/* 基础样式 */.demo-box{width:200px;height:200px;margin:30px 0;border:2px solid #333;transition:all 0.3s ease;/* 过渡效果让样式变化更平滑 */display:flex;align-items:center;justify-content:center;font-size:16px;}/* 待操作的自定义类名样式 *//* 1. 高亮背景色 */.highlight{background-color:#ffd700;/* 金黄色 */}/* 2. 盒子阴影 */.box-shadow{box-shadow:0 0 15pxrgba(0,0,0,0.3);}/* 3. 放大尺寸 */.enlarge{width:260px;height:260px;font-size:18px;}/* 按钮样式优化 */button{margin:0 8px 10px 0;padding:8px 16px;cursor:pointer;border:none;border-radius:4px;background-color:#42b983;color:white;font-size:14px;}button:hover{background-color:#359469;}.result-tip{margin-top:15px;padding:10px;border:1px dashed #ccc;color:#666;}/style/headbodyh3classList 核心方法演示/h3!-- 演示用 DOM 元素 --divclassdemo-boxidmyBox演示盒子/div!-- 操作按钮 --buttonidbtnAdd1. 添加类名highlight box-shadow/buttonbuttonidbtnRemove2. 移除类名box-shadow/buttonbuttonidbtnToggle3. 切换类名enlarge 放大/还原/buttonbuttonidbtnContains4. 判断是否包含 highlight 类名/button!-- 结果提示区域 --divclassresult-tipidresultTip操作结果将显示在这里.../divscript// 1. 获取所有需要操作的 DOM 元素constmyBoxdocument.getElementById(myBox);constbtnAdddocument.getElementById(btnAdd);constbtnRemovedocument.getElementById(btnRemove);constbtnToggledocument.getElementById(btnToggle);constbtnContainsdocument.getElementById(btnContains);constresultTipdocument.getElementById(resultTip);// 2. 绑定按钮点击事件演示 classList 核心方法// 案例1add() - 添加一个或多个类名btnAdd.addEventListener(click,(){// 批量添加两个类名重复添加不会生效自动去重myBox.classList.add(highlight,box-shadow);// 更新结果提示resultTip.textContent✅ 已添加类名highlight、box-shadow当前元素类名${myBox.className};console.log(添加后类名集合,myBox.classList);});// 案例2remove() - 移除一个或多个类名btnRemove.addEventListener(click,(){// 移除 box-shadow 类名移除不存在的类名不会报错myBox.classList.remove(box-shadow);// 更新结果提示resultTip.textContent✅ 已移除类名box-shadow当前元素类名${myBox.className};console.log(移除后类名集合,myBox.classList);});// 案例3toggle() - 切换类名存在则移除不存在则添加btnToggle.addEventListener(click,(){// 切换 enlarge 类名实现“放大/还原”开关效果constisToggledmyBox.classList.toggle(enlarge);// 更新结果提示if(isToggled){resultTip.textContent✅ 已添加类名enlarge盒子放大当前元素类名${myBox.className};}else{resultTip.textContent✅ 已移除类名enlarge盒子还原当前元素类名${myBox.className};}console.log(切换后类名集合,myBox.classList);});// 案例4contains() - 判断是否包含指定类名btnContains.addEventListener(click,(){// 判断是否包含 highlight 类名返回布尔值consthasHighlightmyBox.classList.contains(highlight);// 更新结果提示if(hasHighlight){resultTip.textContent✅ 元素包含类名highlight;}else{resultTip.textContent❌ 元素不包含类名highlight;}console.log(是否包含 highlight,hasHighlight);});/script/body/html2、执行结果