这里是代码
document.body.className = document.body.className != "cls" ? "cls" : "";
我可以理解“ xx?xx:xx;”,但是什么是“ document.body.className = document.body.className!=” cls“ \”。我不知道它是如何工作的。我的想法是:if(document.body.className = cls)返回ture,如果!=返回flase。
完整代码
<style>
.cls {
background-color: black;
}
</style>
</head>
<body id="bd">
<input type="button" value="open/close" id="btn"/>
<script>
my$("btn").onclick = function () {
document.body.className = document.body.className != "cls" ? "cls" : "";
};
</script>
上面的代码只是三元运算符的常规用法。我根据运算符的执行顺序放置()
。
my$("btn").onclick = function () {
document.body.className = (document.body.className != "cls") ? "cls" : "";
};
无论何时触发onclick事件。以下发生。
"cls"
,它将其更改为"cls"
"cls"
更改为""
这只是切换className
b / w "cls"
和""
的一种方法>
注意:
永远不要直接更改元素的className
。它将删除所有其他类。您应该Element.classList.add()
和Element.classList.remove()
添加和删除类。但是,在这种情况下,您可以使用Element.classList.toggle
my$("btn").onclick = function () {
document.body.classList.toggle('cls');
};
如果document.body.className
是'cls'
,则它将删除该类;如果不是'cls'
,则将其设置为'cls'
。简单。