js让元素隐藏显示

在JavaScript中，控制元素的显示与隐藏通常通过修改元素的CSS样式属性来实现，常用的属性是 display 和 visibility 。

基础概念：

display 属性：决定元素是否及如何显示。设置为 none 时元素完全不占据空间且不可见；设置为 block 、inline 等值时元素可见。
visibility 属性：决定元素是否可见。设置为 hidden 时元素不可见但仍占据空间；设置为 visible 时元素可见。

优势：

能够灵活地控制页面元素的呈现，实现动态交互效果。
可以根据不同的条件实时改变元素的显示状态。

类型：

基于 display 属性的隐藏显示。
基于 visibility 属性的隐藏显示。

应用场景：

导航菜单的展开与收起。
弹窗的显示与关闭。
内容的分步展示。

示例代码：

通过 display 属性实现隐藏显示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #myElement {
      width: 200px;
      height: 100px;
      background-color: lightblue;
    }
  </style>
</head>

<body>
  <button onclick="toggleDisplay()">切换显示</button>
  <div id="myElement">这是一个元素</div>

  <script>
    function toggleDisplay() {
      var element = document.getElementById('myElement');
      if (element.style.display === 'none') {
        element.style.display = 'block';
      } else {
        element.style.display = 'none';
      }
    }
  </script>
</body>

</html>

通过 visibility 属性实现隐藏显示：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #myElement {
      width: 200px;
      height: 100px;
      background-color: lightgreen;
    }
  </style>
</head>

<body>
  <button onclick="toggleVisibility()">切换可见性</button>
  <div id="myElement">这是一个元素</div>

  <script>
    function toggleVisibility() {
      var element = document.getElementById('myElement');
      if (element.style.visibility === 'hidden') {
        element.style.visibility = 'visible';
      } else {
        element.style.visibility = 'hidden';
      }
    }
  </script>
</body>

</html>

常见问题及解决方法：

元素隐藏后仍占据空间：可能是使用了 visibility: hidden ，改用 display: none 。
隐藏显示操作不生效：检查 JavaScript 代码是否有语法错误，确保元素 ID 正确获取，以及样式设置的语法正确。

页面内容是否对你有帮助？

有帮助

没帮助

如果javascript被禁用，如何在任何X/HTML元素上赋予css样式？

、、、

我想从外部的css文件做它。我在主css中有一个div#abc，但是我只想在禁用javascript的情况下为这个div设置display none。

浏览 2提问于2010-01-30得票数 1

2回答

无法在浏览器中查看div

、、

button onclick="startGame()">Replay</button> <script type="text/javascript" src="script.js

浏览 1提问于2018-07-24得票数 0

4回答

禁用JavaScript时添加元素样式

、、、

当JS被禁用时，我试图避免添加在线样式。例如，当JS被禁用时，我想在主体中隐藏一个元素，但我只想在外部CSS中执行此操作。我想避免像下面这样添加样式 <style> </style> </noscript> <bo

浏览 1提问于2016-02-14得票数 1

4回答

在document.ready之前，Jquery UI界面看起来很丑陋

、、、

HTML元素比onload或document.ready更早显示。所有的jQuery UI小部件都是在document.ready上加载的，这会让页面在最初几秒钟内看起来很丑陋。处理它的可能选项-在元素被jQuery UI拉出之前隐藏元素，并在加载后使用JS显示它们。但是如果JS被关闭，用户将看不到任何元素，既不能看到标准的超文本标记语言，也不能看到jQuery用户界面。

浏览 11提问于2011-01-02得票数 16

回答已采纳

2回答

如何在浏览器中禁用javascript时不让所有用户继续

、

我有一个登录页面，我希望用户不要进一步，如果Javascript被禁用。我尝试使用noscript标签，但是在noscript message...How中出现了页面UserId、密码字段和登录按钮，以通过警告完全模糊背景，并且只有在用户启用Javascript之后才能继续...

浏览 1提问于2012-09-16得票数 0

回答已采纳

2回答

如何在Jsf2中动态创建html组件

、、

如何在Jsf2中动态创建html组件。我必须制作一个动态表单，由用户填写，所以我不知道如何管理，我必须使用JavaScript还是什么？？我也在使用richfaces。

浏览 3提问于2010-09-09得票数 1

1回答

调整可见性时div元素闪烁

、、、、

我想当一个按钮被点击时隐藏一个div，当一个链接被点击时显示它，但发生的是它只是闪烁，无论是显示它还是隐藏它。所有这些都会使它在闪光中出现(如果使其可见)，或者在闪光中消失(如果使其隐藏)。 ret

浏览 2提问于2011-02-06得票数 0

回答已采纳

1回答

在不同的页面元素上运行多个settimeout或显示函数

、、、

我知道这是比较基本的，但是，我正在尝试创建一个包含三个隐藏元素的页面，这些元素要么是在时间延迟后显示的，要么是鼠标单击后显示的。我正在挣扎的是让这三个元素在同一个页面上运行。要求：元素2:隐藏的div将在页面加载10分钟后显示元素3:元素2中的按钮图像，单击后会显示另

浏览 1提问于2013-09-25得票数 0

3回答

除了单击之外，还可以使用哪个事件处理程序？

、、、、

我有一个jQuery问题，我真的认为这是一个愚蠢的问题:我是JS和jQuery的初学者.$("#myLink").click(function(){ $(".myClassToHide").hide();隐藏类myClassToHide作为类属性的元素，并以类myClassToShow作为类属性显示元素。我认为这很容易理解:) 我不认为它会隐藏所有

浏览 6提问于2012-11-23得票数 0

回答已采纳

1回答

使用特定屏幕尺寸的隐藏/显示jQuery和innerWidth在单击锚点链接时隐藏移动菜单

、、

出于这个原因，我使用了隐藏/显示jQuery，但它也会导致我的桌面屏幕菜单消失。在我看来，我需要适当地添加innerWidth，但我很难做到这一点。

浏览 0提问于2020-05-06得票数 0

2回答

在rails中使用javascript保存状态

、、、、

我在多个视图中有多个元素，我使用jquery切换来显示或隐藏它们。我想要做的是保存它们的状态，这样它们就是持续不断的请求。(即，如果用户的panel1显示，但panel2隐藏，当他们刷新时，他们将保持原样)这个主意看起来不错，但我还不够精明

浏览 0提问于2010-11-25得票数 0

回答已采纳

2回答

jQuery .hide()和.show()之间奇怪的交互

、

我的网站中有两个元素在同一个容器中。一个是可见的(display: block)，另一个是隐藏的(display: none)。在事件中，我希望隐藏可见元素，并显示隐藏元素。问题是，当我在隐藏可见元素之后显示隐藏元素时，它总是有一个瞬间，它从可见元素顶部的上一个堆叠位置跳到它应该在的位置： Velocity(document.getElementById(&quo

浏览 36提问于2018-12-28得票数 3

回答已采纳

4回答

jquery隐藏函数

、

我对jquery隐藏函数有一个一般性的疑问。我环顾四周，似乎找不到一个直接的答案。我想知道在页面加载时隐藏的对象是仍然加载然后隐藏，还是在触发器被调用后隐藏然后加载。另外，如果加载了对象，是否有一些函数只会在被触发时加载隐藏元素？

浏览 1提问于2011-10-27得票数 3

回答已采纳

4回答

在页面加载前隐藏HTML元素的正确方法是什么？

、、、、

我应该如何隐藏元素(使用javascript)，以便在JS有机会隐藏它们之前，页面加载时不会出现这些元素？我不想把它们设置为一开始就用CSS隐藏起来，就好像用户没有Javascript一样，他们什么也看不到。所以我的要求： HTML元素最初不会使

浏览 55提问于2012-10-12得票数 5

回答已采纳

1回答

手风琴或选项卡内的响应式Google广告

、、、

有没有办法让响应式Google广告在Bootstrap类型的手风琴或选项卡中显示？问题是accordion使用了隐藏的元素，插入的广告无法显示，我从adsense代码中得到了this js错误： TagError: adsbygoogle.push() error: No slot

浏览 1提问于2016-01-05得票数 1

1回答

将事件回调函数添加到内部带有Font Awesome图标的按钮

、、、

我在我的标题上有一个搜索栏，默认情况下我将其隐藏，旁边有一个按钮，根据特定条件显示/隐藏它。我使用Font Awesome制作了按钮内容，如果搜索栏被隐藏，我将放置一个搜索图标以指示“显示搜索”，如果搜索栏显示为指示“隐藏搜索”，则放置一个右V形图标。我编写js的方式是，在单击按钮时，如果事件目标包含某些类，搜索栏将显示/隐藏，问题是事件目标可以是i元素(Font Awesome

浏览 16提问于2020-08-29得票数 1

回答已采纳

2回答

在加载javascript/css时消除页面闪烁

、、

jquery.booklet.1.4.0.css" media="screen" /> <script type="text/javascript" src="scripts/jquery-ui.min.<em

浏览 2提问于2012-08-15得票数 1

1回答

渐进式增强-不使用CSS隐藏元素

、、

我经常发现自己使用jQuery显示/隐藏元素，例如，一个简单的选项卡式内容区域，其中第一个选项卡可见，而其他选项卡只有在使用javascript显示时才可见。我知道，使用CSS (display: none)隐藏最初隐藏的内容，然后使用JS显示正确的内容，这不是一个好的做法，因为非JS用户永远看不到任何东西。因此，默认情况下，我会显示所有内容，然后使用JS隐藏相关内容。

浏览 6提问于2012-08-23得票数 1

回答已采纳

2回答