CODEWITHSUNDEEP
javascriptgreasemonkey
Drew
Drew

Reputation: 710

Change class property without forcing it to stay that way

I've been trying to change the background color of these buttons on stackoverflow:

If I edit the background property in Firefox's inspector, everything functions as expected:

However, once I run a greasemonkey script to change it, I run into issues. It's like my script permanently froze the background of the button: 

var tags = document.getElementById("nav-tags");
tags.style.background = "#1D3239 none repeat scroll 0% 0%"

Every stackexchange post I've looked over and every article I've found through Google search says that the way to change the property of a CSS class is to set it through object.style, but since I'm experiencing this behavior of the background freezing and never changing along with only the tag button changing and none of the others, it leads me to believe that setting the background of the style is really just changing (and freezing) the background of the element and not the class.

How can I change the background of the class (not just that one element) and not have it permanently freeze the change (I want the orange highlight to still happen)? Even if the buttons had classes, the only way I know to access them is through document.getElementsByClassName() which would return elements and not the class. I don't know how to edit the class directly through JavaScript.

Also, on the topic of the orange highlight, I don't see a property for it anywhere in the Firefox inspector window. Where can I find it so that I know what to modify?

Upvotes: 1

Views: 115

Answers (1)

omikes
omikes

Reputation: 8513

Label the buttons with the same class, say "orangeToBlack", then use CSS:

.orangeToBlack {
background-color: orange;
}

.orangeToBlack:hover {
background-color: black;
}

Upvotes: 1

Related Questions