js display none

display: none; 是CSS中的一个属性值，用于控制HTML元素的显示状态。当一个元素的 display 属性被设置为 none 时，该元素及其所有内容都不会在页面上显示，同时也不会占据任何空间。

基础概念

CSS属性：display 是CSS中的一个属性，用于定义元素的布局方式。
属性值：none 是 display 属性的一个值，表示元素不显示且不占据空间。

类型与应用场景

类型：这是一个CSS属性值，不是JavaScript特有的，但可以通过JavaScript来动态改变元素的 display 属性。
应用场景：
- 登录表单的隐藏与显示。
- 根据用户操作动态显示或隐藏菜单项。
- 隐藏错误消息直到它们需要被展示。

示例代码

以下是一个简单的HTML和JavaScript示例，展示了如何使用 display: none; 来控制元素的显示与隐藏：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display None Example</title>
<style>
  .hidden {
    display: none;
  }
</style>
</head>
<body>

<button onclick="toggleVisibility()">Toggle Element Visibility</button>
<div id="elementToHide" class="hidden">
  This element can be hidden and shown.
</div>

<script>
function toggleVisibility() {
  var element = document.getElementById('elementToHide');
  if (element.classList.contains('hidden')) {
    element.classList.remove('hidden');
  } else {
    element.classList.add('hidden');
  }
}
</script>

</body>
</html>

遇到的问题及解决方法

问题：使用 display: none; 后，元素虽然不显示，但仍然占据空间，影响布局。

原因：这种情况通常是因为CSS选择器不正确，或者元素的父元素有其他样式影响了布局。

解决方法：

确保正确选择了需要隐藏的元素。
检查父元素的样式，确保没有其他样式（如 float、position 等）影响布局。
使用浏览器的开发者工具检查元素的计算样式，确认 display 属性确实被设置为 none。

通过以上方法，可以有效地控制页面元素的显示与隐藏，同时避免布局上的问题。

JS在` `display: none`和` `display: flex`之间切换

、、

我有一个用于响应导航的JS函数，当屏幕太小时，可以用一个汉堡按钮来隐藏和显示导航。我的问题是，即使CSS样式显示为display:none，导航的链接也会在加载时显示，之后该按钮会按预期工作，并让我在display: none和display: flex之间切换。是什么导致它在加载时忽略display: none？ var x = document.getElementById("navLin

浏览 10提问于2020-01-07得票数 0

6回答

测试display = none

//$('tbody').highlight(myArray[i]); } // set backgrou

浏览 1提问于2010-06-04得票数 33

回答已采纳

1回答

每当display: none；

、、

: none;"> <div class="select-wrapper select initialized"> <span class<div class=&q

浏览 0提问于2017-09-20得票数 0

7回答

JS中display = 'none‘的反面是什么？

、、

但是我在.style.display = 'visible'上遇到了一些麻烦，在display = 'none'的对立面上找不到任何东西。所以我想知道JS中“无”的反面是什么？

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

回答已采纳

2回答

(jQuery或JS)在display=none时显示

、、

Desription 2</p>function showdescript(this) { { document.getElementById(this).style.<

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

回答已采纳

4回答

JS来监视CSS属性的变化，像"display:none"=>"display:block"？

、、、

当图像的CSS属性"display“被任何其他JS脚本/函数更改时，我想运行一些JS代码。有没有什么方法可以监控这个变化并设置一个回调函数？ $(this).bind.

浏览 5提问于2012-05-05得票数 4

回答已采纳

2回答

同时使用display: none和display:flex；

、、

h3>Description</h3> </div> CSS： width: 100%; display100%; top: 0; background: rgba(0, 0, 0, 0.8); display: none; <e

浏览 34提问于2015-12-18得票数 14

回答已采纳

1回答

选择Display:None With Jsoup

、

有一件事我无法解决：doc.select("*[style=display:none]").remove(); 但这并不适用于所有情况。有时，在样式标记中，有多个属性，如style="display:none，width...“有时，会有空格、冒号等，比如style="display: none;“。doc.getElem

浏览 2提问于2013-05-09得票数 3

1回答

Display: block / Display: none on element:hover not working

、、、、

</a></li> <div class="one-on-two" id="showme"> SHOW ME</div>#showme {} display: block;为什么以及如何才能使它只与css和HTML一起工作？

浏览 0提问于2020-10-16得票数 0

1回答

display: none更改为display: inline by itself？

、、、

(); console.log("hide "+codebase); console.log($('#'+codebase

浏览 3提问于2012-09-05得票数 0

回答已采纳

5回答

使用JS显示被"display: none“隐藏的div？

、、

HTML： <div id="a-div" style="display: none;"> </div> <div id="d-div" style="display:

浏览 0提问于2015-09-17得票数 2

1回答

关于.dojoxGridMasterHeader { display:none；}

、、

Dojo文档推荐使用.dojoxGrid-header { display:none；}关闭列标题，但我只看到调试器中使用了dojoxGridMasterHeader。.dojoxGridMasterHeader { display:none; }.dojoxGridMasterHeader { display:none; } <

浏览 2提问于2012-06-13得票数 1

回答已采纳

1回答