Change font-size in auto-generated HTML from px to em using javascript

I have an HTML generated from a web service which I cannot control. The HTML has font sizes in px and pt. My requirement is changing all font-sizes to em.

This is what I tried :

I tried to access all <font> tags using :

document.getElementByTagName('font').style.fontSize;

However, it is returning null even though I have many font tags in HTML.

All relevant sources I read assume we have control over CSS or HTML and hence do not apply to my problem.

In short, I want to parse the HTML and find all inline style (font-size) and change from any other type to em.

Answer

If the styling is in HTML then it’s inline styles. There’s no CSS Wizardry that will override it. What you need to do is directly modify the inline styles.

Here’s what you’re looking for:

var elem = document.getElementById("elementID");
elem.setAttribute("style", "font-size: 2em");

You’ll have problems in IE with setAttribute so if that’s a concern … you’ll need to write a fallback to handle it.