Jump to content
pstein

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

Recommended Posts

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 by pstein

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×