JavaScript实现显示和隐藏div方法汇总

在前端开发中，显示和隐藏元素是一项基本的操作。本文将介绍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样式来控制元素的显示与隐藏。例如：

--------- -----
------
------
    ----- ----------------
    ---------------------------------
    -------
        ----- -
            -------- -----
        -
    --------
-------
------
    ---- -----------------
    ------- -------------------------------
    ------- -------------------------------

    --------
        --- ----- - ---------------------------------

        -------- --------- -
            -------------------------------

- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------