jquery - 外部+内联样式与仅外部样式

Question

问题+概述

下面是两个片段，其中包含最初隐藏的 div，然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样式。区别如下:

在示例 1 中，内联特异性覆盖了外部样式表。显示 div 时保留网格布局。

在示例 2 中，display: grid; 被级联覆盖。显示 div 时不保留网格布局。

在我看来，下面的两个片段应该具有相同的结果，因为两个 display: grid; 样式都被覆盖 - 尽管表面上的方式略有不同.

这里发生了什么导致第一个示例工作，而第二个示例破坏网格布局？

如果可能的话，我更喜欢技术性的、低层次的解释。

我添加了 jQuery 标签，以防 jQuery 做了一些我不知道的魔法。

示例 1:内联 + 外部样式

在下面的代码片段中，我在外部样式表中将 div 的显示设置为 display: grid;。

我还将同一 div 的显示设置为 display: none; 内联。

然后我使用 jQuery 的 .hide() 函数显示 div，并且 div 保留其网格布局。

$(document).ready(function() {
  $('#show-div').click(function() {
    $('#inline-style-div').show();
  });
});

#inline-style-div {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 50px;
}

.grid-number {
  margin: 0;
  padding: 10px 25px 10px 25px;
  background-color: #333;
  color: white;
}

.grid-number:nth-child(even) {
  padding: 10px 25px 10px 25px;
  background-color: #ccc;
  color: #333;
}

#show-div {
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="inline-style-div" style="display: none;">
  <h5 class="grid-number">1</h5>
  <h5 class="grid-number">2</h5>
  <h5 class="grid-number">3</h5>
  <h5 class="grid-number">4</h5>
  <h5 class="grid-number">5</h5>
  <h5 class="grid-number">6</h5>
</div>

<button type="button" id="show-div">Show the div</button>

示例 2:仅限外部样式

在此代码段中 - 在其他条件相同的情况下 - 我已在外部样式表中将上述 div 的显示顺序设置为 display: grid; 和 display: none; .

当我在此示例中显示 div 时，该 div 不会保留其网格布局。

$(document).ready(function() {
  $('#show-div').click(function() {
    $('#external-style-div').show();
  });
});

#external-style-div {
  display: grid;
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 50px 50px;
}

.grid-number {
  margin: 0;
  padding: 10px 25px 10px 25px;
  background-color: #333;
  color: white;
}

.grid-number:nth-child(even) {
  padding: 10px 25px 10px 25px;
  background-color: #ccc;
  color: #333;
}

#show-div {
  margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="external-style-div">
  <h5 class="grid-number">1</h5>
  <h5 class="grid-number">2</h5>
  <h5 class="grid-number">3</h5>
  <h5 class="grid-number">4</h5>
  <h5 class="grid-number">5</h5>
  <h5 class="grid-number">6</h5>
</div>

<button type="button" id="show-div">Show the div</button>

Answer 1

使用 jQuery 的 .show() 大致相当于调用 .css( "display", "block")，只不过将 display 属性恢复为原来的样子最初是。如果某个元素的显示值为inline，那么隐藏并显示后，它将再次显示为inline。

在您的第一个示例中，jQuery 注意到内联显示值设置为 none，因此它删除了该值并让级联生效(感谢 @Alohci)。

在你的第二个例子中，jQuery注意到初始显示值设置为none(忽略它之前的第一个赋值，因为它不知道这一点)，因此假设你想要当您使用 show() 时，它设置为 block。

Reference

进一步阅读:How does jquery's show/hide function work? (类似问题)