使用JS覆盖CSS类

Question

I am using Reveal JS. This is the CSS that I want to override:

.reveal section img {...

Using one of the methods below (or something better), how can I use JS to override that?

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

Answer 1

First, use chrome dev tools to make sure that the class is actually being added to the element.

If it is being added but the styles are not being applied, your problems may be stemming from css specificity rules .

Instead of defining your class like this:

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

Try this:

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