在前端开发中，显示和隐藏元素是一项基本的操作。本文将介绍JavaScript实现显示和隐藏div的方法，并提供具体的示例代码。
1. 使用display属性
可以使用CSS的display属性来控制元素的显示与隐藏。该属性有以下几个值：
none：隐藏元素block：显示元素，占据一行inline：显示元素，不占据整行inline-block：显示元素，且不换行
下面是一个简单的示例，通过改变div的display属性来实现显示和隐藏：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ---------------------------------- -------- -------- - --------- ------ ---------- ------ -------------------- ----- ----------- ----- --- --------- ------- ------ ----- ----------------- -------- ------------------------------- -------- ------------------------------- --------- ----- ----- - --------------------------------- ---------- --------- - ---------------------- - -------- --- ---------- --------- - ---------------------- - ------- --- ---------- ------- -------
在这个示例中，初始时div的display属性设置为none，当点击“显示”按钮时，JavaScript会将其改为block，从而使div显示出来。同理，点击“隐藏”按钮时，JavaScript将其改为none，从而使div隐藏。
2. 使用visibility属性
除了display属性外，CSS还提供了另一个控制元素显示与隐藏的属性——visibility。该属性有以下几个值：
visible：显示元素hidden：隐藏元素，但仍占据空间collapse：对表格元素起作用，将行或列折叠起来，其他元素不受影响
下面是使用visibility属性来实现显示和隐藏的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ---------------------------------- -------- -------- - --------- ------ ---------- ------ -------------------- ----- -------------- ------- --- --------- ------- ------ ----- ----------------- -------- ------------------------------- -------- ------------------------------- --------- ----- ----- - --------------------------------- ---------- --------- - ------------------------- - ---------- --- ---------- --------- - ------------------------- - --------- --- ---------- ------- -------
在这个示例中，初始时div的visibility属性设置为hidden，当点击“显示”按钮时，JavaScript会将其改为visible，从而使div显示出来。同理，点击“隐藏”按钮时，JavaScript将其改为hidden，从而使div隐藏。
需要注意的是，使用visibility属性隐藏元素时，它仍然占据空间，只是不可见了。因此，如果要完全删除元素，应该使用display属性。
3. 使用classList属性
除了以上两种方法外，还可以使用classList属性来添加或删除一个或多个类名。利用这些类名，我们可以通过CSS样式来控制元素的显示与隐藏。例如：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ---------------------------------- -------- ------- - ----------- ----- --- --------- ------- ------ ----- ----------------- -------- ------------------------------- -------- ------------------------------- --------- ----- ----- - --------------------------------- ---------- --------- - ---------------------------------- - ---------------------------------------------------------- -------- --------------------------------------------------------------------------------