在前端开发中，常常需要实现各种交互效果，其中之一就是开关按钮。本文将介绍如何使用 Javascript 和 CSS 创建一个简单的开关按钮，并对代码进行详细解析。
HTML 结构
首先，我们需要创建一个基本的 HTML 结构，包含一个开关按钮和显示状态的文本：
<div class="switch"> <input type="checkbox" id="toggle" class="toggle-input"> <label for="toggle" class="toggle-label"></label> <div class="toggle-text">OFF</div> </div>
其中，input 标签定义了一个 type 为 checkbox 的复选框，label 标签则用于绑定 input 元素并提供可点击的区域，div 标签内的文本用于显示当前状态。
CSS 样式
接下来，我们使用 CSS 对开关按钮进行样式设置。首先定义整个开关按钮的样式：
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}其中，position: relative 表示元素相对于其正常位置进行定位，display: inline-block 表示元素将按照块级元素排布，但会被当作内联元素对待，width 和 height 分别设置了宽度和高度。
接着，对 input 元素进行样式设置：
.toggle-input {
display: none;
}这里将 display 设置为 none，表示不显示该元素。
然后，对 label 元素进行样式设置：
-- -------------------- ---- ------- ------------- - --------- --------- ---- -- ----- -- ------ ----- ------- ----- -------------- ----- ----------------- ----- ------- -------- - -------------------- - -------- --- -------- ------ ------ ----- ------- ----- ------- ---- -------------- ---- ----------------- ------ ----------- --- ----- - --------------------- - ------------- - ----------------- -------- - --------------------- - -------------------- - ---------- ----------------- -
这里将 position 设置为 absolute，表示元素相对于最近的定位祖先元素进行定位。top 和 left 分别设置了距离顶部和左侧的偏移量，width 和 height 分别设置了宽度和高度。border-radius 表示圆角半径，background-color 表示背景颜色。cursor 设置为 pointer，表示当鼠标移到该元素上时，鼠标指针会变成手形。
.toggle-label::after 用于定义开关按钮的滑块，首先使用 content 属性添加一个空白字符，然后设置 display 为 block，表示将该元素作为块级元素进行排布。width 和 height 分别设置了宽度和高度，margin 表示外边距的大小，border-radius 表示圆角半径，background-color 表示背景颜色。
.toggle-input:checked + .toggle-label 和 .toggle-input:checked + .toggle-label::after 分别定义了复选框被选中时的样式。
最后，对显示状态的文本进行样式设置：
.toggle-text {
position: absolute;
top: 8px;
right: 10px;
font-size: 12px;
color: #888;
}这里同样使用 position 属性进行定位，指定了距离顶部和右侧的偏移量，font-size 表示字体大小，color
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25535