删除一个类，然后将其添加回另一个显示中

时间：2020-03-31 08:45:44

标签： javascript html css

我有一个称为“ line”的特定css样式的类。在一个按钮上单击（“播放”按钮），从我的元素“ 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

1 个答案:

答案 0 :(得分：1)

我认为您在Blink中发现了一个错误，该错误是从WebKit的WebCore继承而来的（闪烁是WebCore的分支）。可能值得将其报告给WebKit项目，也可能要报告给Blink所属的Chromium项目。

我将此评估基于：

  • 相同的类实际上应该显示相同的显示。
  • 该问题在诸如Brave，Chrome，基于Chromium的Edge和Safari（WebKit）之类的浏览器上发生，而在Firefox（使用Gecko）或Legacy Edge（使用EdgeHTML）上没有发生

这是Anakin创建的解决方法，请参见代码中的注释：

app.use(
  cors({
    origin: 'https://staging.domain.io/',
    credentials: true
  })
);
app.options(
  "*",
  cors({
    origin: 'https://staging.domain.io/',
    credentials: true
  })
);

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"），但是当您使用body作为其最外面的元素时，它就可以正常工作。

相关问题
最新问题