javascript隐藏span_js 隐藏

温馨提示：这篇文章已超过239天没有更新，请注意相关的内容是否还可用！

JavaScript中隐藏span元素可以通过设置CSS的display属性为none来实现。当display属性值为none时，元素将不会被显示在页面上。

我们可以使用JavaScript获取到要隐藏的span元素。可以通过getElementById()方法来获取具有特定id的元素。然后，我们可以使用style属性来设置元素的display属性为none。

以下是一个示例代码：


<!DOCTYPE html>
<html>
<head>
<style>
  .hidden {
    display: none;
  }
</style>
</head>
<body>
  <span id="mySpan">这是要隐藏的文本</span>
  <button onclick="hideSpan()">隐藏</button>
  <script>
    function hideSpan() {
      var span = document.getElementById("mySpan");
      span.style.display = "none";
    }
  </script>
</body>
</html>

在上面的示例中，我们首先定义了一个CSS类`.hidden`，它的display属性被设置为none。然后，我们在页面上放置了一个span元素，并给它一个id为`mySpan`。接着，我们添加了一个按钮，并在按钮的`onclick`事件中调用了一个JavaScript函数`hideSpan()`。

在`hideSpan()`函数中，我们使用`document.getElementById("mySpan")`获取到了具有id为`mySpan`的span元素，并将其赋值给变量`span`。然后，我们通过`span.style.display = "none"`将span元素的display属性设置为none，从而隐藏了该元素。

需要注意的是，我们也可以直接在JavaScript中使用`document.querySelector()`或`document.querySelectorAll()`方法来选择要隐藏的元素，而不是使用id选择器。这样可以更灵活地选择多个元素进行隐藏。

除了使用display属性来隐藏元素，我们还可以使用visibility属性来隐藏元素。当visibility属性值为hidden时，元素仍然占据页面空间，但不可见。可以通过设置visibility属性为hidden来隐藏span元素。

以下是一个使用visibility属性隐藏span元素的示例代码：


<!DOCTYPE html>
<html>
<head>
<style>
  .hidden {
    visibility: hidden;
  }
</style>
</head>
<body>
  <span id="mySpan">这是要隐藏的文本</span>
  <button onclick="hideSpan()">隐藏</button>
  <script>
    function hideSpan() {
      var span = document.getElementById("mySpan");
      span.style.visibility = "hidden";
    }
  </script>
</body>
</html>

在上面的示例中，我们定义了一个CSS类`.hidden`，它的visibility属性被设置为hidden。然后，我们在页面上放置了一个span元素，并给它一个id为`mySpan`。接着，我们添加了一个按钮，并在按钮的`onclick`事件中调用了一个JavaScript函数`hideSpan()`。

在`hideSpan()`函数中，我们使用`document.getElementById("mySpan")`获取到了具有id为`mySpan`的span元素，并将其赋值给变量`span`。然后，我们通过`span.style.visibility = "hidden"`将span元素的visibility属性设置为hidden，从而隐藏了该元素。

需要注意的是，使用visibility属性隐藏的元素仍然占据页面空间，因此在页面布局上可能会有影响。而使用display属性隐藏的元素不占据页面空间。在选择使用哪种方法隐藏元素时，需要根据具体需求来决定。

javascript隐藏span_js 隐藏

相关阅读