如何在 HTML、CSS 和 Javascript (vanilla) 中制作切换开关词

Question

I have run into a roadblock trying to get this to work.我遇到了一个障碍，试图让它发挥作用。 I am attempting to create a switch that toggles an action on/off.我正在尝试创建一个可以打开/关闭操作的开关。 For example, when a user toggles on the switch the switch will do Javascript action when it is on the on position and will turn off when the switch is toggled to the off position.例如，当用户打开开关时，开关将在打开位置时执行 Javascript 操作，并在开关切换到关闭位置时关闭。 That is ultimately my end goal with this.这就是我最终的目标。 What can I do to make this work, I have been doing trial and error for the last maybe 10 daysish??我能做些什么来完成这项工作，过去 10 天我一直在反复试验？ What can I say?我能说什么？ I am determined.我打定主意了。 Here is the code, any help is appreciated!这是代码，任何帮助表示赞赏！ Thank you everyone.谢谢大家。 <3 <3

    <!DOCTYPE>
<html>

<body>

<label class = 'switch'>

<input type = 'checkbox' id = 'yet'>
    
<span class = 'slider'></span>

</label>

</body>
    
<style>

.switch {

    display: inline-block;
    position: absolute;
    height: 30px;
    width: 60px;

}

#yet{display: none;}

.slider {

    top: 1px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    cursor: pointer;
    background-color: #D00005;
    -webkit-transition: .3s;
    border-radius: 25px;
}

.slider:before {

    cursor: pointer;
    position: absolute;
    height: 26px;
    width: 26px;
    bottom: 2px;
    left: 4px;
    border-radius: 100%;
    content: "";
    background-color: #000000;
    -webkit-transition: .3s;
}
    
#yet:checked+.slider {

    background-color: #16AA03;
}

#yet:checked+.slider:before {

    -webkit-transform: translateX(26px);

}

</style>
    
    <script>
    
    function myBird() {
        
        document.body.style.backgroundColor = '#000000';
                
    }
        
        function myRed() {
            
            document.body.style.backgroundColor = '#FFFFFF';
        }
        
    </script>

</html>

Answer 1

Use an onClick event handler , checking the value of this.checked to know whether the input is checked or not.使用onClick事件处理程序，检查this.checked的值以了解输入是否被选中。

HTML: HTML：

<input type = 'checkbox' id = 'yet' onclick='handleClick(this)'>

JavaScript: JavaScript：

function handleClick(cb) {
    if (cb.checked) {
        myBird();
    } else {
        myRed();
    }
}

function myBird() {
    document.body.style.backgroundColor = '#000000';
}

function myRed() {
    document.body.style.backgroundColor = '#FFFFFF';
}

All together with CSS:所有与 CSS 一起：

 function handleClick(cb) { if (cb.checked) { myBird(); } else { myRed(); } } function myBird() { document.body.style.backgroundColor = '#000000'; } function myRed() { document.body.style.backgroundColor = '#FFFFFF'; }

 .switch { display: inline-block; position: absolute; height: 30px; width: 60px; } #yet { display: none; } .slider { top: 1px; bottom: 0px; left: 0px; right: 0px; position: absolute; cursor: pointer; background-color: #D00005; -webkit-transition: .3s; border-radius: 25px; } .slider:before { cursor: pointer; position: absolute; height: 26px; width: 26px; bottom: 2px; left: 4px; border-radius: 100%; content: ""; background-color: #000000; -webkit-transition: .3s; } #yet:checked+.slider { background-color: #16AA03; } #yet:checked+.slider:before { -webkit-transform: translateX(26px); }

 <label class = 'switch'> <input type = 'checkbox' id = 'yet' onclick='handleClick(this)'> <span class = 'slider'></span> </label>

如何在 HTML、CSS 和 Javascript (vanilla) 中制作切换开关词

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-10-31 09:26:50

如何在 HTML、CSS 和 Javascript (vanilla) 中制作切换开关词

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-31 09:26:50

解决方案1
0 已采纳 2020-10-31 09:26:50