Jump to content

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


pstein
 Share

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
Link to comment
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.

Link to comment
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
 Share

×
×
  • Create New...