Javascript-如何在任何元素的任何页面上更改字体大小

我的视力很差。所以我想放大任何页面上的字体大小，如果它小于最小值。我正在使用“tampermonkey”插件来自动化这个脚本。 人们建议查找特定元素并按如下方式进行编辑：

document.getElementById("p1").style.font="italic bold 20px arial,serif";

或按以下方式更改所有字体：

document.body.style.fontSize = "220%";

但它不会影响像这里这样的div中的文本（只影响标题）：

---

我应该遍历所有页面元素还是有更好的方法？Thnx

您当前的方法取决于站点仅使用相对单位（或继承）来确定要使用的字体大小

给定（不是HTML，我使用简单的元素名称以便于引用）：

对

a

所做的任何更改都将用于计算

b

（因为

em

是一个相对单位）。但是，

c

是使用绝对

*

单位定义的，因此它将始终是

12px

我应该遍历所有页面元素还是有更好的方法

对于这种粗略的方法，我可以看到几个选择

迭代所有样式规则（包括

document.styleSheets

和页面中每个元素的

style

属性），并删除对绝对单位的任何引用

迭代页面上的每个元素，测试其计算样式，并在运行时设置

element.style.fontSize=“something！important”

问题是两者都需要相当长的时间才能运行，特别是在一个大页面上（需要测试很多元素）

您可能会考虑完全抛出默认样式，可能是从页面中抓取所有HTML，然后是“代码>文档”。编写“< /代码>”以清除现有内容。

与其从头开始写我自己的，我可能会考虑使用市场上现有的工具。我倾向于使用Mobile Safari的阅读模式，当我看到一篇我想阅读的文章有太小的文本或对比度问题时，我会选择Chrome

或者，Firefox有一个最小字体大小的首选项

---

---

*

好的，从严格的CSS术语来看，像素是一个相对单位，但它们与另一个元素的字体大小无关，因此它们实际上是绝对的

如果您愿意切换到Firefox，它内置了首选项>内容>默认字体：高级>最小字体大小。

<a> Alpha
    <b> Beta
        <c> Charlie
        </c>
    </b>
</a>

b { font-size: 0.8em; }
c { font-size: 12px; }