javascript - 删除一个类，然后将其添加回去会导致不同的显示

Question

我有一个名为“line”的特定 css 样式类。单击按钮(PLAY 按钮)，我从元素“song_info”中删除此类，然后添加一个名为“standard”的新类。在另一个按钮上单击(暂停按钮)我删除类“标准”然后重新添加类“线”。

function play_button() {
  document.getElementById('song_info').classList.remove("line");
  document.getElementById('song_info').classList.add("standard");
}

function pause_button() {
  document.getElementById('song_info').classList.remove("standard");
  document.getElementById('song_info').classList.add("line");
}


window.onload = function() {
  document.getElementById("play_button").onclick = play_button;
  document.getElementById("pause_button").onclick = pause_button;
}

.css3gradient {
  width: 298px;
  height: 180px;
}

body {
  margin: 10px;
  white-space: nowrap;
}

#play_button {
  top: 65%;
  left: 113px;
  position: absolute;
  transform: translate(-50%, -50%);
}

#pause_button {
  top: 65%;
  left: 191px;
  position: absolute;
  transform: translate(-50%, -50%);
}

#songContainer {
  width: 198px;
  height: 50px;
  position: absolute;
  overflow: hidden;
  padding: 0;
  margin: 0;
  top: 50px;
  left: 60px;
  z-index: -2;
}

#albumContainer {
  width: 198px;
  height: 50px;
  position: absolute;
  overflow: hidden;
  padding: 0;
  top: 72px;
  left: 60px;
  /*z-index: -1;*/
}

#songWrapper {
  position: absolute;
  overflow: hidden;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

#albumWrapper {
  position: absolute;
  overflow: hidden;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
  /*z-index: -1;*/
}

#songWrapper span.line {
  position: absolute;
  overflow: hidden;
  position: relative;
  /*margin: 15px;*/
  width: auto;
  top: 35%;
  left: 50%;
  animation: marquee 10s linear infinite;
  z-index: -2;
}

#albumWrapper span.line {
  position: absolute;
  overflow: hidden;
  position: relative;
  width: auto;
  top: 50%;
  left: 50%;
  animation: marquee 10s linear infinite;
  z-index: -1;
}

#songWrapper span.standard {
  margin: 15px;
  visibility: visible;
  display: block;
  position: relative;
  width: 149px;
  height: 45px;
  top: 50%;
  left: 50%;
  z-index: -1;
  /*
  margin-top: 11px;
  width: 200px;
  visibility: visible;
  position: absolute;
  top: 20px;
  left 20px;
  */
  transform: translate(-50%, -50%);
}

#albumWrapper span.standard {
  margin: 15px;
  visibility: visible;
  display: block;
  position: relative;
  width: 149px;
  height: 45px;
  top: 50%;
  left: 50%;
  z-index: -1;
  /*
  margin-top: 11px;
  width: 200px;
  visibility: visible;
  position: absolute;
  top: 20px;
  left 20px;
  */
  transform: translate(-50%, -50%);
}

@keyframes marquee {
  0% {
    left: -17%;
  }
  100% {
    left: -50.4%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="css3gradient">
  <div class="idiv">
    <div id="songContainer" class="marqueeContainer">
      <div id="songWrapper" class="loaded">
        <span id="song_info" class="line shadowedObj">No Song Is Currently Playing!!!&nbsp;&nbsp;&nbsp;No Song Is Currently Playing!!!&nbsp;&nbsp;&nbsp;No Song Is Currently Playing!!!</span>
      </div>
    </div>
    <div id="albumContainer" class="marqueeContainer">
      <div id="albumWrapper" class="loaded">
        <span id="album_info" class="line shadowedObj">Album is longer and long enough&nbsp;&nbsp;&nbsp;Album is longer and long enough&nbsp;&nbsp;&nbsp;Album is longer and long enough</span>
      </div>
    </div>
  </div>
  <div class="idiv">
    <button class="button" id="play_button">PLAY</button>
    <button class="button" id="pause_button">PAUSE</button>
  </div>
</div>

预期的行为是 css 样式将恢复正常。然而，情况并非如此，而且该职位被大幅提升。当给定的类被删除然后重新添加时，我们难道不会总是期望样式相同吗？它具有不同的样式到底是怎么回事？如何通过添加和删除类来实现预期效果并还原 css 更改？

可在此处找到示例:JSFiddle

Answer 1

我认为您在 Blink 中发现了一个错误它在 WebKit 中继承自 WebCore (Blink 最初是 WebCore 的一个分支)。可能值得将其报告给 WebKit 元素，也许还报告给 Blink 所属的 Chromium 元素。

我的评估基于:

• 相同的类确实应该产生相同的显示。
• 问题发生在 Brave、Chrome、基于 Chromium 的 Edge 和 Safari (WebKit) 等浏览器上，而不会发生在 Firefox(使用 Gecko)或 Legacy Edge(使用 EdgeHTML)上

这是由 Anakin 创建的解决方法，看代码中的注释:

function play_button() {
  document.getElementById('song_info').classList.remove("line");
  document.getElementById('song_info').classList.add("standard");
}

function pause_button() {
  document.getElementById('song_info').classList.remove("standard");
  document.getElementById('song_info').classList.add("line");
}


window.onload = function() {
  document.getElementById("play_button").onclick = play_button;
  document.getElementById("pause_button").onclick = pause_button;
}

.css3gradient {
  width: 298px;
  height: 180px;
}

body {
  margin: 10px;
  white-space: nowrap;
}

#play_button {
  top: 65%;
  left: 113px;
  position: absolute;
  transform: translate(-50%, -50%);
}

#pause_button {
  top: 65%;
  left: 191px;
  position: absolute;
  transform: translate(-50%, -50%);
}

#albumContainer {
  width: 198px;
  height: 50px;
  position: absolute;
  overflow: hidden;
  padding: 0;
  top: 72px;
  left: 60px;
  //z-index: -1;
}

#songWrapper {
  position: absolute;
  overflow: hidden;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
}

#albumWrapper {
  position: absolute;
  overflow: hidden;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
}

#albumWrapper span.line {
  overflow: hidden;
  position: relative;
  width: auto;
  top: 50%;
  left: 50%;
  animation: marquee 10s linear infinite;
  z-index: -1;
}

#albumWrapper span.standard {
  margin: 15px;
  visibility: visible;
  display: block;
  position: relative;
  width: 149px;
  height: 45px;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
}

@keyframes marquee {
  0% {
    left: -17%;
  }
  100% {
    left: -50.4%;
  }
}

#songWrapper span.line {
  /* removed top and right property */
  position: relative;
  width: auto;
  overflow: hidden;
  animation: marquee 10s linear infinite;
  z-index: -2;
}

#songWrapper span.standard {
  /* there is no need to change into a block element
     so, what's really important in this class is removing the animation */
  animation: none;
}

#songContainer {
  /* now we move this element down to make it near with #albumContainer */
  position: absolute;
  overflow: hidden;
  width: 198px;
  height: 30px;
  /* decrease the height */
  padding: 0;
  margin: 0;
  top: 72px;
  /* move this down a little more */
  left: 60px;
  z-index: -2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="css3gradient">
  <div class="idiv">
    <div id="songContainer" class="marqueeContainer">
      <div id="songWrapper" class="loaded">
        <span id="song_info" class="line shadowedObj">No Song Is Currently Playing!!!&nbsp;&nbsp;&nbsp;No Song Is Currently Playing!!!&nbsp;&nbsp;&nbsp;No Song Is Currently Playing!!!</span>
      </div>
    </div>
    <div id="albumContainer" class="marqueeContainer">
      <div id="albumWrapper" class="loaded">
        <span id="album_info" class="line shadowedObj">Album is longer and long enough&nbsp;&nbsp;&nbsp;Album is longer and long enough&nbsp;&nbsp;&nbsp;Album is longer and long enough</span>
      </div>
    </div>
  </div>
  <div class="idiv">
    <button class="button" id="play_button">PLAY</button>
    <button class="button" id="pause_button">PAUSE</button>
  </div>
</div>

它使用 div class="css3gradient" 作为它的最外层元素(因为 Snippet 本身提供了 body)，但是当你使用 body class="css3gradient" 作为最外层。