如何在不使用 pseduo ::before 和 ::after 的情況下創建切換元素？
我想在 html 頁面上創建一個切換，但不使用偽::before和::after。
我目前正在使用此處給出的 w3Schools 的方法：https ://www.w3schools.com/howto/howto_css_switch.asp
但是，我不想要任何 ::before 或 ::after 偽類。如果可能的話，我只想一個人上課。我嘗試為此重寫我自己的課程，但似乎沒有按預期作業。
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked .slider {
background-color: #2196F3;
}
input:focus .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
我嘗試在sliderbefore沒有偽元素的情況下自己制作一個元素，但它似乎沒有用。（它缺少切換內的小圓圈）
.sliderbefore {
border-radius: 34px;
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
box-shadow: 0 0 1px #2196F3;
}
uj5u.com熱心網友回復：
與classList.toggle：
const a= document.getElementsByClassName('a');
const b= document.getElementsByClassName('b');
function changeColor(){
a[0].classList.toggle("d");
b[0].classList.toggle("e");
} .a{
position: absolute;
border:1px solid red;
width: 500px;
height:300px;
background:green;
}
.b {
left:51px;
position: absolute;
top:2px;
float: right;
border-radius:50%;
width: 35px;
height:35px;
background: white;
transition: all 0.1s;
}
.c {
position: absolute;
top:40px;
left:130px;
border-radius:20px;
width: 90px;
height:40px;
background: #ced0d4;
}
.d{
background: blue;
}
.e{
left:4px;
}<div class="a">
<div class="c" onclick="changeColor()">
<div class="b"></div>
</div>
</div> uj5u.com熱心網友回復：
我能夠通過僅使用 javascript 和 html 而不是 psuedo :before 和 :after 來創建切換元素
<html><head></head>
<script type="text/javascript">
function toggle(button) {
if (button.value == "OFF") {
button.value = "ON";
} else {
button.value = "OFF";
}
}
</script>
<body>
<form action="">
<input type="button" id="1" value="ON" style="color:blue"
onclick="toggle(this);">
</form></body></html>
該元素是一個input值為 ON 的元素。切換功能將在單擊時打開和關閉切換器。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/463934.html
標籤：javascript html css