使用 JS 覆盖 CSS 类答案

【问题标题】：Override CSS class using JS使用 JS 覆盖 CSS 类
【发布时间】：2017-01-31 15:57:11
【问题描述】：

我正在使用 Reveal JS。这是我要覆盖的 CSS：

.reveal section img {...

使用以下方法之一（或更好的方法），我如何使用 JS 来覆盖它？

document.getElementById(image1).classList.add("red"); // I tried creating a CSS class called "red" but it doesn't overide the original
document.getElementById(image1).style.boxShadow = "red"; // this doesn't overide the original theme CSS

【问题讨论】：

显示你想要覆盖的实际样式——如果它是盒子阴影——它是不是也需要对阴影进行一些测量，而不仅仅是颜色？例如：5px 2px 2px red。另外，如果您的课程没有工作，我认为您需要阅读 css 特异性和顺序
box-shadow: red 不是有效的 CSS
抱歉这个愚蠢的问题。我想这可以解决它。我想我可以改变颜色，因为它已经存在一个盒子阴影。
如果 image1 是实际 ID 而不是变量名，则需要在其周围加上引号：document.getElementById("image1")。
这是一个变量名，但无论如何感谢您的评论

标签： javascript css html overriding reveal.js

【解决方案1】：

首先，使用 chrome 开发工具确保类确实被添加到元素中。

如果正在添加但未应用样式，则您的问题可能源于css specificity rules。

不要像这样定义你的类：

.red {
  box-shadow: 5px 2px 2px red;
}

试试这个：

.reveal section img.red {
  box-shadow: 5px 2px 2px red;
}

【讨论】：

这行不通，但出于某种原因，这样做：.reveal section img.red {