JavaScript三元运算符:document.body.className = document.body.className!=“ cls”? “ cls”:“”;?

问题描述 投票:-1回答:1

这里是代码

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>
javascript
1个回答
0
投票

上面的代码只是三元运算符的常规用法。我根据运算符的执行顺序放置()

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');
};

0
投票

如果document.body.className'cls',则它将删除该类;如果不是'cls',则将其设置为'cls'。简单。

© www.soinside.com 2019 - 2024. All rights reserved.