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

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

javascript html css

Javascript 创建切换的语义元素和撤消函数的最佳实践,javascript,html,css,toggle,Javascript,Html,Css,Toggle,样本：切换 #首先{ 颜色：蓝色； } #第二{ 边框：1px纯绿色； } #第三{ 背景：谭； } 切换弗斯特第二第三函数切换（）{ var-box=document.getElementById（'box'）； var first=document.getElementById（'first'）； var second=document.getElementById（'second'）； var third=document.getElementById（'third'）；如果

样本：


切换
#首先{
颜色：蓝色；
}
#第二{
边框：1px纯绿色；
}
#第三{
背景：谭；
}
切换
弗斯特
第二
第三
函数切换（）{
var-box=document.getElementById（'box'）；
var first=document.getElementById（'first'）；
var second=document.getElementById（'second'）；
var third=document.getElementById（'third'）；
如果（复选框）{
first.style.color='red'；
second.style.border='2px点蓝色'；
third.style.background='olive'；
}否则{
first.style.color='blue'；
second.style.border='1px纯绿色'；
third.style.background='tan'；
}
}

我想知道

输入复选框是否是创建切换的正确元素。我还想知道如何撤销if
子句中的内容：在else
中，我必须重复我的样式表，还是有一种更简洁的方法返回初始状态。我想知道输入复选框是否是创建切换的正确元素？
切换*的定义：
计算一个以相同方式操作但具有
连续出现的相反效果
复选框**的说明：
在计算中，复选框（复选框、勾选框或勾选框）是
图形用户界面元素（小部件），允许用户
进行二进制选择，即在两个可能的选项中选择一个
相互排斥的选择
是的，这是最好的选择
2。我还想知道如何撤销if子句中的内容：否则我必须重复我的样式表，还是有一种更简洁的方法返回初始状态？
为此，您可以使用jQuery：
使用addClass（）
/removeCLass（）
方法或toggleClass（）
；您可以将活动类样式放入一个新类中，应用这些样式，然后在else
/off状态下简单地删除它们。这也意味着您要保持内容和样式之间的分离
或常规JS：
.setAttribute（“类”、“活动”）
和删除属性（“类”，“活动”）
或干脆。删除属性（“样式”）
取消设置内联应用的样式并恢复到原始状态
*
**回答第二个问题：
您可以使用getElementById（“id”）.removeAttribute（“style”）以删除内联样式
<!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>

你可以用这样更好的方式来做：
在html中添加一个父div，如下所示：
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")
}

然后使用javascript只添加和删除一个类：
.checked #first {
    color:red;
}
.checked #second {
    border:2px dotted blue;
}
.checked #third {
    background:olive;
}

正如我在问题中提到的，我正在寻找一种JavaScript方法。非常感谢您的确认和解释！：）你的方法看起来很完美！但是在您的演示中，为什么不使用标记作为父元素，而不是添加另一个HTML元素？我想知道您对此有何看法：
.checked #first {
    color:red;
}
.checked #second {
    border:2px dotted blue;
}
.checked #third {
    background:olive;
}

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

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