Question

样品：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Toggle</title>
    <style>
        #first {
            color: blue;
        }
        #second {
            border: 1px solid green;
        }
        #third {
            background: tan;
        }
    </style>
</head>

<body>
    <label for="box">Toggle</label>
    <input type="checkbox" id="box" onchange="toggle();">
    <div id="first">First</div>
    <div id="second">Second</div>
    <div id="third">Third</div>
    <script>
        function toggle() {
            var box = document.getElementById('box');
            var first = document.getElementById('first');
            var second = document.getElementById('second');
            var third = document.getElementById('third');
            if (box.checked) {
                first.style.color = 'red';
                second.style.border = '2px dotted blue';
                third.style.background = 'olive';
            } else {
                first.style.color = 'blue';
                second.style.border = '1px solid green';
                third.style.background = 'tan';
            }
        }
    </script>
</body>

</html>

DEMO

我想知道input checkbox是否是创建切换的正确元素。我还想知道如何撤消我在if子句中的内容：在else中我是否必须重复我的样式表，或者是否有更简洁的方法来回到初始状态？

Answer 1

您可以更好地执行此操作： demo

在html中添加父div，如下所示：

<div id="parent">
    <div id="first">First</div>
    <div id="second">Second</div>
    <div id="third">Third</div>
</div>

然后使用css代替内联样式处理前端：

.checked #first {
    color:red;
}
.checked #second {
    border:2px dotted blue;
}
.checked #third {
    background:olive;
}

然后使用javascript添加和删除一个类：

function toggle() {
        var box = document.getElementById('box');
        var parent = document.getElementById('parent');

        if (box.checked) {
            parent.className = parent.className + "checked";
        } else {
            parent.className = "";
        }
    }

Answer 2

<强> 1。我想知道输入复选框是否是创建切换的正确元素？

toggle *的定义：

计算以相同方式操作的键或命令在连续的情况下相反的效果。

复选框**的说明：

在计算中，复选框（复选框，复选框或复选框）是一个允许用户使用的图形用户界面元素（小部件）做出二元选择，即两种可能之一的选择相互排斥的选择。

是的，这是最好的选择。

<强> 2。我也想知道如何撤消if子句中的内容：in else我是否必须重复我的样式表，或者是否有更简洁的方法回到初始状态？

为了做到这一点，你可以使用jQuery：

使用addClass() / removeCLass()方法或toggleClass();您可以将活动的类样式放入新类中，然后应用这些类，然后在else / off状态下删除它们。这也意味着你要保持内容和样式之间的分离。

或常规JS：

.setAttribute("class", "active");和.removeAttribute("class", "active");或简称.removeAttribute("style");取消设置内联应用的样式并恢复原始状态。

* Source

** Source

Answer 3

回答第二个问题：

您可以使用getElementById("id").removeAttribute("style");删除内联样式。

if (box.checked) {
    first.style.color = 'red';
    second.style.border = '2px dotted blue';
    third.style.background = 'olive';
} else {
    first.removeAttribute("style")
    second.removeAttribute("style")
    third.removeAttribute("style")
}

用于创建切换的语义元素和撤消函数的最佳实践

3 个答案: