使用Javascript将自动生成的HTML中的字体大小从像素（px）改为em

Question

我有一个来自Web服务的HTML，我无法控制。该HTML中的字体大小使用了px和pt单位。我的要求是将所有字体大小改为em。

这是我尝试过的：

我尝试使用以下方式访问所有的<font>标签：

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

然而，即使我在HTML中有许多字体标签，它仍然返回null。

我阅读的所有相关来源都假定我们对CSS或HTML有控制权，因此不适用于我的问题。

简而言之，我想解析HTML并查找所有内联样式（字体大小），并将其从任何其他类型更改为em。

- Vidhi

---

你尝试过像这样通过CSS来控制父标签内的字体标签吗？ #parent font{font-size:1em !important;} - Gopikrishna

Answer 1

尝试使用document.getElementsByTagName......你漏掉了s :)

- albert

---

啊，抱歉，那就是导致空值的原因。 - albert

Answer 2

如果样式是在HTML中，则为内联样式。没有CSS魔法可以覆盖它。您需要做的是直接修改内联样式。

这就是您要寻找的内容：

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

你如果关心在IE浏览器中使用setAttribute会有问题，那么你需要编写一个备用方案来处理它。

- akamaozu

Answer 3

你的方法存在问题，因为你试图在整个节点列表上更改样式。

当你调用getElementsByTagName时，你不会得到一个单独的元素。你需要遍历节点中的元素，然后在每个元素上使用elememt.style.fontSize = size;。

这里有一个实现这个方法的fiddle http://jsfiddle.net/Kfd2R/

- Tetraodon

---

谢谢...我明白了并修改了我的代码。现在它像您创建的那个fiddle一样正常工作。然而，使用这种px转em的方法是否可行？我不确定，正在寻找替代方案。 - Vidhi

通常建议使用em或百分比。在以px设置字体大小时可能会遇到一些问题。一个相当流行的方法是将文档中的字体大小设置为62.5％，然后使用em调整特定元素的字体大小。您可以尝试的一种方法是剥离内联样式，然后注入自己的自定义样式表。这样，您就可以控制页面上的所有样式。 - Tetraodon