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

Question

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 1

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.

Answer 2

try document.getElementsByTagName.......you are leaving out the s :)

Answer 3

The problem with your approach is that you are trying to change the style on an entire Node List.

When you call getElementsByTagName you do not get back a single element. You need to iterate over the elements in the node and then use elememt.style.fontSize = size; on each of the elements.

Here is a fiddle that implements that http://jsfiddle.net/Kfd2R/