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

[Ben]

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

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

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

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

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

resp.

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

How can I achieve this with GM?

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?

Ben

[Tim Koop]

Hi Ben.

You could try this.

If the style declarations are on the html page, do this:

In your Grease Monkey script, you'll have to loop through each <style> tag:

document.getElementsByTagName('style')[i]

Then, for each one, do a find and replace on the contents.  You can get the contents like this:

document.getElementsByTagName('style')[i].innerHTML

If the style declarations come from a separate .css file, then I don't know the answer.  You might have to loop through each element on the page, asking its font size and manually setting it differently.

--

Tim