隐藏 CSS 元素而不更改显示属性 [重复]答案

【问题标题】：Hide CSS Element Without Changing Display Property [duplicate]隐藏 CSS 元素而不更改显示属性 [重复]
【发布时间】：2018-10-07 16:34:27
【问题描述】：

我想保留一个初始显示的元素，但它是隐藏的（起初）。我知道还有其他使用 CSS 隐藏元素的方法，但是我也不希望元素一开始就占用空间。举个例子

.target_element {
    display: table;
}

// event happens later...
$('.loader').hide()
$('.target_element').show()

有没有办法做到这一点？我不想将 display 设置为“none”，然后在我想显示时在某些 JS 中将其设置为“table”。

【问题讨论】：

出于好奇，我必须问：为什么 display: none 是不可取的？
@Frish 可能是因为你不能在上面触发 JS 事件。
@Frish 呃，因为那样会破坏我的表格布局
为什么会破坏你的表格布局？
@APAD1 当我将 display 设置为 none，然后将其设置为 table 时，我发现元素及其子元素（标签和输入）没有正确呈现。

标签： javascript jquery html css

【解决方案1】：

你想隐藏你的元素多久？

有多种方法可以做到这一点，您可以在浏览器中设置 cookie，也可以使用 Javascript 函数（如 setTimeout）在固定时间后显示元素。

setTimeout( function() {
   $("#your_element").show();
   }, 5000); // Time in milliseconds

【讨论】：

【解决方案2】：

有几种方法。您可以制作元素position: absolute 或position: fixed，这样它就不会占用任何空间，然后使用visibility: hidden、opacity: 0 等中的任何一个。您需要注意的一件事是，如果他们没有display: none，他们仍然可以接收点击事件，所以使用pointer-events: none 来阻止它。

我的首选组合：

#myElement {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

然后当你想展示它时：

$("#myElement").css({
  'position': 'static',
  'opacity': 1,
  'pointer-events': 'all'
})

这里的好处是您可以转换不透明度，而不是visibility 或display。

【讨论】：

谢谢！我最终按照另一个答案和这个的建议使用了包装器。
好的，很高兴它成功了

【解决方案3】：

使用包装器来隐藏和显示您的表格。

HTML

<div class="target_wrapper">
  <div class="target_element"></div>
</div>

CSS

.target_element {
    display: table;
}


.target_wrapper {
    display: none;
}

JS

$('.target_wrapper').show()

说明

.show() 设置display: block;。为避免更改表的属性，请使用不依赖于该属性的包装器。它会在您触发$('.target_wrapper').show() 并正确显示您的表格后立即显示。

【讨论】：

【解决方案4】：

听起来最简单的解决方案是使用隐藏可见性

.target_element {
    visibility: hidden;
}

基于 cmets，您似乎不想影响您的整体布局，因此这将使项目“不可见”，但它仍会占据位置。

【讨论】：

【解决方案5】：

display:none; 绝对是要走的路，除非我误解了你的问题。如果您的问题是 .show() 将其切换为 display:block; 则只需使用 jQuery 将类添加到元素。

setTimeout(function() {
  $('table').addClass('visible');
}, 2000);

table {
  display:none;
}
  table.visible {
    display:table;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
  <tr><td>Test</td><td>Test</td></tr>
</table>

【讨论】：

【解决方案6】：

// styles.css
.e.hidden {
  position: 'static',
  opacity: 0,
  pointer-events: 'all'
}

// main.js
setTimeout(() => {
  $('.e').removeClass('hidden')
}, 5000)

// index.html
<div class="e hidden">
  ...
</div>

这个怎么样？

【讨论】：