色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

為什么內聯css和內部css有不同的行為？[重復]

CSS
錢斌斌2年前7瀏覽0評論

在這個例子中，我必須點擊兩次才能看到Foo內容，但只需點擊一次就能看到Bar內容。唯一的區別是Foo content有內部樣式，Bar有內聯樣式。

<html>

<head>
  <style>
    .content {
      display: none;
    }
  </style>

  <script>
    function showHide(element) {
      sibling = element.nextElementSibling;
      if (sibling.style.display == "none")
        sibling.style.display = "block"
      else sibling.style.display = "none";
    }
  </script>
</head>

<body>
  <h1 onclick="showHide(this)">Foo</h1>
  <div class="content">
    Foo Content
  </div>

  <h1 onclick="showHide(this)">Bar</h1>
  <div style="display: none;">
    Bar Content
  </div>
</body>

</html>

當您從JavaScript讀取sibling.style.display時，您將獲得該元素的內聯顯示樣式。當沒有內聯顯示樣式時，您會得到& quot"。您可以獲得計算的樣式，但是更好的通用解決方案是根本不要直接從JavaScript設置樣式，而是操作有意義的類:

function showHide(element) {
    const sibling = element.nextElementSibling;
    sibling.classList.toggle("content-hidden");
}

.content-hidden {
    display: none;
}

<h1 onclick="showHide(this)">Foo</h1>
<div class="content-hidden">
    Foo Content
</div>

<h1 onclick="showHide(this)">Bar</h1>
<div class="content-hidden">
    Bar Content
</div>

問題是sibling.style.display引用的是樣式屬性，而不是元素的計算樣式。您會注意到，如果您再次單擊它，它會起作用，因為第一次單擊會設置要顯示的樣式:none，因此后續的單擊會使它可見。

但是您可以通過使用元素的classList切換一個使其可見的類來解決這個問題，如下例所示。

function showHide(element) {
  sibling = element.nextElementSibling;
  sibling.classList.toggle('visible')
}

.content {
  display: none;
}

.visible {
  display: block;
}

<h1 onclick="showHide(this)">Foo</h1>
<div class="content">
  Foo Content
</div>

<h1 onclick="showHide(this)">Bar</h1>
<div class="content">
  Bar Content
</div>