在前端开发中，我们经常需要根据用户的交互行为，动态地隐藏或显示某些元素。这里介绍一种常用的方法：利用布尔类型的变量控制元素的显示与隐藏。
布尔类型
布尔类型是一种只有两个取值（真或假）的数据类型。在 JavaScript 中，可以使用关键字 true 和 false 来表示布尔类型的取值。
let a = true; let b = false;
控制元素的显示与隐藏
通过设置元素的 display 样式属性，可以控制元素的显示与隐藏。当 display 的值为 "none" 时，元素会被隐藏；当值为 "block"、"inline" 或 "inline-block" 时，元素会被显示。
那么如何利用布尔类型的变量来控制元素的显示与隐藏呢？我们可以使用条件运算符 ? 和 : 来实现：
<div style="display: ${isVisible ? 'block' : 'none'}">内容</div>上述代码中，${isVisible ? 'block' : 'none'} 表示如果 isVisible 的值为 true，则返回字符串 "block"，否则返回字符串 "none"。这样，根据 isVisible 的不同取值，我们就可以控制元素的显示与隐藏了。
示例代码
下面是一个完整的示例，包括 HTML、CSS 和 JavaScript 代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------
-------
---- -
------ ------
------- ------
----------------- ----------
------- --- ----- -----
-------- ----- -- ------- --
-
--------
-------
------
-------
------ --------------- ------------ -------
--------
---- ----------- -----------------
--------
----- ------ - ----------------------------------
----- --- - -------------------------------
--------------------------------- -- -- -
----------------- - -------------- - ------- - -------
---
---------
-------
-------在该示例中，我们创建了一个具有初始样式 display: none 的 <div> 元素，并使用一个带有选框的标签来控制该元素的显示与隐藏。当用户勾选选框时，JavaScript 代码会更新元素的 display 样式属性，从而实现元素的动态显示或隐藏。
总结
通过布尔类型的变量，我们可以方便地控制元素的显示与隐藏。这种方法不仅简单易用，还可以帮助我们减少页面的加载时间和响应时间，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12399