javascript - HTML/CSS : Changing CSS declaration on another HTML file?

Question

我有一个index.html 文件。我正在尝试添加另一个使用相同 CSS 文件的 HTML 文件。问题是我必须更改新 HTML 的 CSS 声明之一，但不知道如何更改。

index.html CSS

#bg {
  -moz-animation: bg 60s linear infinite;
  -webkit-animation: bg 60s linear infinite;
  -ms-animation: bg 60s linear infinite;
  animation: bg 60s linear infinite;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Set your background with this */

  background: #348cb2 url("images/bg.jpg") bottom left;
  background-repeat: repeat-x;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  filter: brightness(50%);
}

假设我正在尝试使用另一个背景图像制作index2.html，例如

background: #348cb2 url("images/anotherImage.jpg") bottom left;

有什么方法可以在不添加另一个 CSS 文件的情况下执行类似的操作吗？或者用Javascript改变它？

Answer 1

您可以使用相同的 CSS 文件，但为第二个 index.html 定义不同的 id。类似的东西

.bg-common {
  -moz-animation: bg 60s linear infinite;
  -webkit-animation: bg 60s linear infinite;
  -ms-animation: bg 60s linear infinite;
  animation: bg 60s linear infinite;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Set your background with this */
  background-repeat: repeat-x;
  height: 100%;
  left: 0;
  opacity: 1;
  position: fixed;
  top: 0;
  filter: brightness(50%);
}
#bg1{
  background: #348cb2 url("images/bg.jpg") bottom left;
}
#bg2{
  background: #348cb2 url("images/anotherImage.jpg") bottom left;
}

现在您可以在index.html中使用bg1，在index2.html中使用bg2。 .bg-common 可以与这两个文件一起使用