使用 JavaScript 更改 *（所有內容）的 fontSize
[英]Changing fontSize of * (everything) with JavaScript
問題描述
在我的項目中，我希望用戶能夠放大網頁。 但是由於 JS 的瀏覽器內縮放功能沒有得到廣泛支持，我想另一種縮放方法是更改font-size: n%; 因為我對所有與尺寸相關的東西都使用了 rem 單位。
如果我在 css 中更改 * 的字體大小，其他所有內容都會隨字體大小縮放。 例如： *{font-size: 110%;}與將瀏覽器縮放更改為 110% 相同。
此外，我想使用 select > 選項在 50% 和 150% 之間進行選擇。 這樣我就可以利用onchange="this.value"
如何使用 Javascript 更改 CSS 中 * 的字體大小/字體大小？
* (CSS) 我指的是頁面上的每個元素，而不僅僅是 div、form 或 id。
編輯：
當我在每個元素上使用 REM 單位時，我需要做的就是更改 root/<html> 元素的 fontSize。 這是我用來為我解決的代碼：
<html id="html">
----------------
<select onchange="document.getElementById('html').style.fontSize = this.value;">
<option value="125%">125%</option>
<option value="120%">120%</option>
<option value="115%">115%</option>
<option value="110%">110%</option>
<option value="105%">105%</option>
<option value="100%" selected>100%</option>
<option value="95%">95%</option>
<option value="90%">90%</option>
<option value="85%">85%</option>
<option value="80%">80%</option>
<option value="75%">75%</option>
</select>
2 個解決方案
解決方案1
3 2020-07-18 14:57:25
請不要這樣做！
由於這是標記的可訪問性，我不建議完全按照您的建議進行操作。
為用戶提供增加字體大小的選項 -大量獎勵積分。
等量縮放頁面上的所有內容 -大量不不。
最大的問題是頁面會隨着字體大小的增加而增加。
這將導致水平滾動和垂直滾動，這是一個很大的禁忌！
為什么這有關系？
最有可能增加您的字體大小的人也可能是依賴屏幕放大鏡的人。
雙向滾動對於屏幕放大鏡用戶來說是一場噩夢，因為句子的一部分可能不在屏幕上。
對於有閱讀障礙等的人來說，這也是一種糟糕的體驗。
他們經常努力確保他們不會跳過一行，在閱讀時不得不左右滾動會使這個問題變得更糟 100 倍。
那么為什么瀏覽器縮放對可訪問性起作用呢？
增加所有內容的大小和使用瀏覽器縮放之間的區別在於，當您縮放瀏覽器時，它還會以 CSS 像素計算頁面的有效寬度。
因此，如果您將 1920 像素寬的屏幕縮放 200%，它將顯示寬度為 960 像素，這將觸發為平板電腦視圖設計的任何媒體查詢（例如）並相應地調整您的 styles。
你該怎么辦？
正如我一開始所說，讓人們改變他們的字體大小 - 大加分！
但是，您應該做的不是縮放所有內容，而是應該確保頁面上的所有容器都可以接受更大的字體大小並在em或rem中定義所有 fonts 。
這樣，您需要做的就是更改<HTML>字體大小，頁面上的每個字體都將縮放相同的數量。
如果您將 HTML 單位設置為百分比，它也會遵循用戶字體大小設置。
在以下示例中，您只需將 HTML 從 100% 更改為 150%，所有字體大小都會增加而不會影響容器大小等。
下面的示例還說明了如果您增加字體大小並且容器在 150% 字體大小時不允許足夠的空間會發生什么。
還可以嘗試以下示例，將瀏覽器字體大小設置為最大，您將看到文本縮放而不影響容器大小。
字體大小 100% 示例
html{ font-size: 100%; } h1{ font-size: 3rem; } p{ font-size: 1rem; }.container{ width: 33%; background-color: #ddd; overflow: hidden; }
<div class="container"> <h1>Heading</h1> <p>text</p> </div>
字體大小 150% 示例
html{ font-size: 150%; } h1{ font-size: 3rem; } p{ font-size: 1rem; }.container{ width: 33%; background-color: #ddd; overflow: hidden; }
<div class="container"> <h1>Heading</h1> <p>text</p> </div>
不要以相同的單位定義容器（作為一般規則），這樣它們就不會超出頁面的范圍。
如果您這樣做，您將使頁面更易於訪問，而不會引入通過強制用戶向兩個方向滾動而實際上降低頁面可訪問性的問題。
解決方案2
1 2020-07-18 14:37:34
- 將表單元素
font或font-size設置為inherit（以覆蓋瀏覽器默認值） - 如果您的元素具有相對字體大小，則只需控制
body元素的字體大小 - 停止使用內聯 JS。 請改用
Element.addEventListener()。 當您不使用帶有 HTML 標簽的 JS 時，調試 JS 會更容易。
document.querySelector("#fontSize").addEventListener("input", function() { document.body.style.fontSize = this.value +"%"; });
h1 { font-size: 4em; /* Demo */ } input, textarea, button { font: inherit; /* override browser defaults */ }
<label><input id="fontSize" type="range" min="10" max="2000" step="1" value="100"></label> <h1>H1 title</h1> <p>Lorem ut florem</p> <blockquote> blockquote </blockquote> <form> <input type="text" value="Lorem ut florem"> <button type="button">Button</button> </form>
使用Javascript更改類的fontSize
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.