JS控制HTML元素的显示和隐藏的两种方法

掌控HTML元素的显示与隐藏：两种实用方法的

在网页开发中，我们经常需要控制HTML元素的显示和隐藏。今天，我将为大家分享两种利用HTML的style属性来实现这一功能的方法。这两种方法各有特色，可以根据实际需求进行选择。

方法一：使用visibility属性

通过修改HTML元素的visibility属性，我们可以实现元素的显示和隐藏。当我们将visibility属性设置为“hidden”时，元素会被隐藏，但其在页面上的位置仍会被保留，显示为空白。反之，将visibility属性设置为“visible”时，元素则会重新显现。

示例代码如下：

```javascript

document.getElementById("EleId").style.visibility = "hidden"; // 隐藏元素

document.getElementById("EleId").style.visibility = "visible"; // 显示元素

```

方法二：使用display属性

另一种方法是利用display属性来控制元素的显示和隐藏。将display属性设置为“none”可以隐藏元素，同时该元素在页面上的位置也不会被保留。反之，将display属性设置为其他值（如“inline”、“block”等）时，元素则会重新显示并占据页面空间。

示例代码如下：

```javascript

document.getElementById("EleId").style.display = "none"; // 隐藏元素

document.getElementById("EleId").style.display = "inline"; // 显示元素

```

这两种方法各有优劣，可以根据实际情况进行选择。如果你希望元素隐藏后仍保留位置，可以选择使用visibility属性；如果你希望元素隐藏后页面空间也被释放，可以选择使用display属性。希望这两种方法能对大家有所帮助，为网页开发带来更多的便利。