Overide CSS-Klasse mit JS

Question

Ich verwende Reveal JS. Dies ist die CSS, die ich außer Kraft zu setzen möge:

.reveal section img {... 

Mit Hilfe eines der unten aufgeführten Methoden (oder etwas besser), wie kann ich JS dass außer Kraft zu setzen?

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

Zuerst Verwendung Chrom dev Tools, um sicherzustellen, dass die Klasse tatsächlich zu dem Element hinzugefügt werden wird.

Wenn es hinzugefügt wird, aber die Stile nicht angewendet werden, können Ihre Probleme von css specificity rules stammen.

Statt der Definition Ihrer Klasse wie folgt:

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

Try this:

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