How to replace all "font-size: 18px;" CSS in HTML by "font-size: 14px;" ?

[pstein]

Assume I want to modify/overwrite the CSS of an existing webpage. Obviously I have no access to the original server.

Instead I want to execute a Greasemonkey script with Javascript code after loading

This CSS contains for various (unknown) elements and (unknown) classes the following CSS keys:

.... {  font-size: 18px;
        ..... }

I want to replace all in these occurencies by the following:

.... {  font-size: 14px;
        ..... }

resp.

.... {  font-size: 14px !important;
        ..... }

How can I achieve this with Javascript?

Again: I do not know all the class names resp IDs which contain the CSS key above.
The class names could vary from time to time.

So I need a kind of filter for the overwrite operation.

Maybe I have to recursively navigate through the DOM tree.

How does that work?
 

Edited May 7, 2018 by pstein

[justsomeguy]

It looks like there is a stylesheets property that will hold all of the inline or linked stylesheets and their rules, you can use that although it won't cover inline styles.  

https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/styleSheets

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

https://developer.mozilla.org/en-US/docs/Web/API/CSSRule

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration

You could loop through all the stylesheets and go through all the rules to check for whatever you want to check for and change things, although like I said it's not going to change any inline styles.