使用 javascript 将自动生成的 HTML 中的字体大小从 px 更改为 em答案

【问题标题】：Change font-size in auto-generated HTML from px to em using javascript使用 javascript 将自动生成的 HTML 中的字体大小从 px 更改为 em
【发布时间】：2013-01-13 20:53:28
【问题描述】：

我有一个从我无法控制的 Web 服务生成的 HTML。 HTML 的字体大小为 px 和 pt。我的要求是将所有字体大小更改为em。

这是我尝试过的：

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

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

但是，即使我在 HTML 中有很多字体标签，它也会返回 null。

我阅读的所有相关资料都假设我们可以控制CSS 或HTML，因此不适用于我的问题。

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

【问题讨论】：

您是否尝试过像这样在字体标签中的父标签...#parent font{font-size:1em !important;}

标签： html css font-size em

【解决方案1】：

如果样式是 HTML，那么它就是内联样式。没有 CSS Wizardry 会覆盖它。您需要做的是直接修改内联样式。

这就是您要查找的内容：

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

setAttribute 在 IE 中会出现问题，所以如果这是一个问题……你需要编写一个后备来处理它。

【讨论】：

【解决方案2】：

试试document.getElementsByTagName.......你忽略了s :)

【讨论】：

啊。抱歉，这就是抛出 null 的原因。

【解决方案3】：

您的方法的问题是您试图更改整个节点列表的样式。

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

这是一个实现http://jsfiddle.net/Kfd2R/的小提琴

【讨论】：

谢谢...我明白了这一点并修改了我的代码。它现在可以正常工作，就像您创建的小提琴一样。但是，是否建议使用这种 px 到 em 的转换？我不确定并正在寻找替代方法。
通常建议使用 em 或 percent。在设置 px 字体大小时可能会遇到一些问题。一种相当流行的做法是，将文档正文中的字体大小设置为 62.5%，然后使用 em 来调节特定元素的字体大小。您可以尝试的一种方法是剥离内联样式，然后注入您自己的自定义样式表。这样您就可以控制页面上的所有样式。