方法二：使用`classList`添加或移除類名

如果你更傾向于使用CSS類來管理樣式，可以通過JavaScript動態(tài)地添加或移除類名來控制元素的顯示和隱藏。

首先，在你的CSS文件中定義一個類，比如：

```css

.hidden {

display: none;

}

```

然后，在JavaScript中使用`classList.add()`方法將這個類應(yīng)用到目標元素上：

```javascript

// 獲取目標元素

var targetDiv = document.getElementById('myDiv');

// 添加hidden類，使元素隱藏

targetDiv.classList.add('hidden');

```

如果你想重新顯示該元素，可以使用`classList.remove()`方法移除這個類：

```javascript

// 移除hidden類，使元素重新顯示

targetDiv.classList.remove('hidden');

```

方法三：利用`visibility`屬性

除了`display`屬性外，還可以使用`visibility`屬性來控制元素的可見性。將`visibility`設(shè)置為`hidden`會使元素不可見，但仍然占據(jù)頁面上的空間。

```javascript

// 獲取目標元素

var targetDiv = document.getElementById('myDiv');

// 設(shè)置visibility為hidden，使元素不可見但保留空間

targetDiv.style.visibility = 'hidden';

```

如果你想讓元素再次顯示出來，可以將其`visibility`屬性重置為`visible`：

```javascript

// 設(shè)置visibility為visible，使元素重新顯示

targetDiv.style.visibility = 'visible';

```

總結(jié)

以上三種方法都可以有效地控制HTML元素的顯示與隱藏。選擇哪種方法取決于你的具體需求：

- 如果希望元素完全從布局中消失，可以選擇`display: none;`。

- 如果需要元素保持其占位空間，但只是隱藏內(nèi)容，則可以使用`visibility: hidden;`。

- 使用CSS類的方式則更適合需要頻繁切換顯示狀態(tài)的場景，因為它提供了更好的代碼可讀性和維護性。

通過這些簡單的技巧，你可以輕松地在JavaScript中實現(xiàn)對DOM元素顯示狀態(tài)的動態(tài)控制，從而提升用戶體驗。