Jump to content

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;
        ..... }


.... {  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.  






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

  • Create New...