javascript - 如何使用 css 或 jquery 将类添加到按钮属性

Question

*,
*::after,
*::before {
  box-sizing: border-box;
}
button {
  width: 250px;
  height: 70px;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 22px;
  border: 3px solid #28F2B3;
  color: #28F2B3;
  line-height: 64px;
  background: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 0 5px #222;
  border-radius: 70px;
  -webkit-animation: over 6s infinite;
  animation: over 6s infinite;
}
button:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #28F2B3;
  -webkit-animation: load 6s infinite;
  animation: load 6s infinite;
}
button:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-bottom: 3px solid;
  border-right: 3px solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  right: 45px;
  top: 18px;
  -webkit-animation: dwd 6s infinite;
  animation: dwd 6s infinite;
}
@-webkit-keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@-webkit-keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@-webkit-keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}
@keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}

<button>Download</button>

好吧，我想在我的个人元素中使用这个动画按钮，但我遇到的问题是我的搜索按钮也与下载按钮具有相同的类，所以当我保存并打开页面时，下载按钮似乎与搜索图标。我搜索了谷歌，但没有找到使用 css 更改按钮类的方法，而且我不太了解 jquery。因此，如果这里有人可以帮助我解决该问题，我们将不胜感激。提前致谢! :)

Answer 1

对不起，但是从上面的代码来看，<button>Download</button>没有上课。假设您可以访问 HTML，您可以将其更改为类似 <button class="downloadBtn"> 的内容然后通过更改 button 中的属性，使用您拥有的 css 专门针对它至 button.downloadBtn .然后你的另一个<button>标签不应被定位。

那么，一些背景知识:在 HTML 和 CSS 中，我们可以使用名为 id 的东西和 class属性来定位特定元素。当你有上面显示的 css 时，它认为你想要定位每个按钮，它是一个 HTML 标签 <button> .开箱即用，CSS 无法知道您只想定位特定按钮。

在这种情况下，我们所做的是利用我提到的属性。您可以做的是让您的下载按钮标签看起来像这样:

HTML

<button id="downloadBtn">Download</button>

然后，将您的 css 更改为如下所示:

CSS

*,
*::after,
*::before {
  box-sizing: border-box;
}
button#downloadBtn {
  width: 250px;
  height: 70px;
  margin: auto;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 22px;
  border: 3px solid #28F2B3;
  color: #28F2B3;
  line-height: 64px;
  background: none;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 0 5px #222;
  border-radius: 70px;
  -webkit-animation: over 6s infinite;
  animation: over 6s infinite;
}
button#downloadBtn:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: #28F2B3;
  -webkit-animation: load 6s infinite;
  animation: load 6s infinite;
}
button#downloadBtn:after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-bottom: 3px solid;
  border-right: 3px solid;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  right: 45px;
  top: 18px;
  -webkit-animation: dwd 6s infinite;
  animation: dwd 6s infinite;
}
@-webkit-keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@keyframes over {
  0%, 20% {
    line-height: 64px;
    width: 250px;
  }
  25%,
  100% {
    line-height: 150px;
    border-color: #28F2B3;
  }
  30%,
  100% {
    width: 70px;
    border-color: #444;
  }
}
@-webkit-keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@keyframes load {
  0%, 40% {
    height: 0;
  }
  90%,
  100% {
    height: 100%;
  }
}
@-webkit-keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}
@keyframes dwd {
  0%, 20% {
    right: 45px;
    top: 18px;
  }
  30%,
  100% {
    right: 25px;
  }
  30%,
  40%,
  50%,
  60%,
  70%,
  80% {
    top: 14px;
  }
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    top: 22px;
  }
  54% {
    color: #28F2B3;
    box-shadow: 3px 3px #333, 6px 6px #28F2B3;
  }
  55%,
  85% {
    color: #333;
    box-shadow: 3px 3px #28F2B3, 6px 6px #333;
    border-width: 3px;
    height: 15px;
  }
  90%,
  100% {
    box-shadow: 1px 1px #333;
    border-width: 5px;
    height: 25px;
    color: #fff;
  }
}

这样，用于使下载按钮看起来像您希望的样式的 css 仅真正针对下载按钮而不是所有按钮。我们可以在这里做很多不同的事情，但总的来说，您可能想查看 this article on css syntax