如何使用 JavaScript 在HTML元素上切换 CSS 类

今天,我们正在探索一种简单而有效的技术,用于使用JavaScript在HTML 元素上切换 CSS 类。我们将在按钮元素上演示这一点,并仅用几行代码突出显示视觉外观和状态的控制。

创建 HTML 按钮

<button id="button" class="red">STOP</button>

我们使用一个由id “button”标识的按钮元素来启动我们的演示,并带有一个初始类red.

使用 CSS 设置按钮样式

body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: grey;
}
 
button {
padding: 10px;
font-size: 1.1em;
border: none;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
 
.green {
background: green;
color: white;
}
 
.red {
background: red;
color: white;
}

上面的 CSS 做了两件事:它改进了按钮的外观并定义了两个状态类 –.green.red。这些类将在 JavaScript 中交替出现,从而影响按钮的颜色和相关的用户消息。

使用 JavaScript 进行切换

const button = document.getElementById("button");
const buttonPressed = (e) => {
e.target.classList.toggle("green");
e.target.classList.toggle("red");
e.target.innerText = e.target.innerText.trim() === "STOP" ? "GO" : "STOP";
};
button.addEventListener("click", buttonPressed);

在 JavaScript 代码片段中,我们首先使用按钮元素的 id 访问按钮元素"button"buttonPressed然后定义该函数以对该按钮上的单击事件做出反应。每次单击,都会使用 切换我们的按钮元素上的.green和类。这给了我们红色和绿色状态之间的视觉相互作用。.redclassList.toggle()

此外,由于采用了三元运算符,按钮的文本还可在“STOP”和“GO”之间切换。该运算符检查当前按钮的文本是否为“STOP”,如果为“true”,则将其更改为“GO”,如果不是,则恢复为“STOP”。这在按钮的外观和其声明的状态之间创建了清晰的视觉关联。

最终结果

图片[1]-如何使用 JavaScript 在HTML元素上切换 CSS 类-得设创意

专业提示:通过应用此技术,您可以在设计中创建丰富的交互式体验。考虑一个照片库,其中切换类会改变布局视图,或者博客摘录上的“阅读更多”功能可扩展内容视图。该概念还可以应用于在网站上切换深色和浅色模式,提供可定制的用户体验。

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情

    暂无评论内容