Javascript - 如何更改任何元素的任何頁面的字體大小

Question

我視力不佳。所以我想放大任何頁面的字體大小，如果它小於最小值。我使用「tampermonkey」插件來自動執行此腳本。 人們要麼建議找到特定的元素，並編輯這樣說：

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

或改變這樣的所有字體：

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

但它不影響內部div的文本也喜歡在這裏（只有標題是受影響）：http://mashable.com/ 我應該遍歷所有頁面元素還是有更好的方法？ Thnx

Answer 1

您目前的方法是依賴於一個網站只使用相對單位（或繼承）來確定使用什麼字體大小。

文（不是HTML，我用簡單的元素名稱爲便於參考）：

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

有：

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

您對a任何更改都將用於計算b （因爲em是相對單位）。但是，c是使用絕對的*單位定義的，因此它始終爲12px。

我應該遍歷所有頁面元素還是有更好的方法？

我可以看到一些粗略方法的選項。

1. 迭代通過所有的樣式規則（包括document.styleSheets，並在頁面的每一個元素的style屬性），並轉移到絕對單位的任何引用。
2. 迭代頁面上的每個元素，測試其計算的樣式並隨時設置element.style.fontSize = "something !important"。

問題是，兩者都需要相當長的時間才能運行，特別是在大型頁面上（這是很多要測試的元素）。

您可能想要完全拋出默認樣式，可能是從頁面抓取所有HTML，然後清除現有內容。

我可能會考慮使用市場上現有的工具，而不是從頭開始寫自己的作品。我傾向於使用Mobile Safari的閱讀模式，當Chrome瀏覽器遇到一篇我想閱讀的文章或對比度過小的文章時，我傾向於使用Chrome。

或者，Firefox具有最小字體大小首選項。

---

* OK，所以技術上嚴格CSS方面，像素是相對單位，但他們不是相對於其他元素的字體大小，所以他們是我們的目的絕對有效。