如何將字體大小按鈕添加到我的網站 HTML、JavaScript 和 CSS？

Question

我正在嘗試添加一個按鈕來控制我的網站的字體大小。 當我按下字體按鈕時，我希望我所有的 fonts 都增加大小。

我試過使用 JavaScript、HTML 和 CSS。

我面臨的問題是，當我按下按鈕時，我網站上的某些文本的大小沒有增加。

我的代碼如下

<!--HTML -->
<button onclick="fontsize()">FontSize</button>
  
/*CSS:*/
    body.fontsize {
      -webkit-font-smoothing: subpixel-antialiased;
      font-size: 3rem;
  }

// JavaScript: //

function fontsize() {
  // Toggling the class "fontsize" on the body
  document.body.classList.toggle("fontsize");
}

謝謝

Answer 1

嘗試這個...

 const increment = document.getElementById("up"), decrement = document.getElementById("down"), fsize = document.querySelector("main"), step = 2; fsize.style.fontSize = "30px"; increment.onclick = function() { fsize.style.fontSize = parseInt(fsize.style.fontSize) + step + "px"; }; decrement.onclick = function() { fsize.style.fontSize = parseInt(fsize.style.fontSize) - step + "px"; };

 body { margin: 20px; } main h2, main h4 { text-align: center; }.font { display: flex; align-items: center; justify-content: space-between; width: 100%; } @media screen and (min-width: 400px) {.font { width: 50%; } } @media screen and (min-width: 768px) {.font { width: 30%; } } @media screen and (min-width: 992px) {.font { width: 20%; } } button { width: 30px; height: 30px; }

 <div class="container"> <div class="font"> <p>Change Font Size: </p> <button id="down">-</button> <button id="up">+</button> </div> <hr> <main> <h2>Hello World</h2> <h4>I am a subtitle</h4> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis, temporibus aut, Distinctio rem. mollitia vero necessitatibus aliquid aliquam eveniet modi reiciendis quo ad illo. Ipsum quo obcaecati quidem commodi reprehenderit,</p> <p>Impedit rerum natus aliquam at sequi harum. Quas modi exercitationem deleniti officia commodi vitae impedit consectetur non, porro reprehenderit expedita fugiat, Nostrum aliquam laboriosam fuga architecto dignissimos impedit id iusto,</p> <p>Ipsa, molestiae voluptates? Assumenda placeat velit totam, rerum recusandae nobis nisi doloribus quam error labore molestias officia eos laudantium quia enim. impedit, ea tenetur beatae et nemo nostrum? Recusandae, odio.</p> </main> </div>

Answer 2

由於提供的信息有限，我猜這是一個風格 inheritance 問題。 不改變大小的文本可能具有來自更近祖先的文本樣式。 這將覆蓋您對主體所做的任何樣式更改。 如果您檢查其中一個不會放大的文本元素，您可以在檢查器的 Styles 部分中看到樣式 inheritance。 任何已被更接近祖先的樣式替換的祖先樣式都將被划掉。

我建議您通過將所有字體大小設置為 rem 並以編程方式更改<html>元素樣式屬性中的字體大小（確定一個 rem 中有多少像素）來解決此問題。

 const htmlEl = document.querySelector("html") let pxPerRem = 16 function increaseFontSize() { pxPerRem++ htmlEl.setAttribute("style", `font-size: ${pxPerRem}px `) } function decreaseFontSize() { pxPerRem-- htmlEl.setAttribute("style", `font-size: ${pxPerRem}px `) }

 body { font-size: 1rem; display: grid; grid-template-columns: 1fr 1fr; }.text-container { font-size: .8rem; } button { font-size: 1rem; }

 <body> <button onClick="increaseFontSize()">+</button> <button onClick="decreaseFontSize()">-</button> <h1>child</h1> <div class="text-container"> <h1>nested descendant</h1> </div> </body>

這將更新使用 rem 分配的所有字體大小，並將保持比例。

Answer 3

如果將其應用於根元素 ( <html> ) 並使用“rem”單位指定 html 中的所有字體大小，則可以使用簡單的 css 切換來執行此操作。 當文本變大或變小時，這也會保留文本的相對大小。

（它必須是html元素，而不是body ，因為rem縮放基於文檔的“根”元素）

運行以下代碼段進行演示。

 function fontsize_1() { // Toggling the class "fontsize" on the body document.body.classList.toggle("fontsize"); } function fontsize_2() { // Toggling the class "fontsize" on the html document.querySelector("html").classList.toggle("fontsize"); }

 body.fontsize { -webkit-font-smoothing: subpixel-antialiased; font-size: 200%; } html.fontsize { -webkit-font-smoothing: subpixel-antialiased; font-size: 200%; } /* example sizes */.px { font-size: 12px }.rem { font-size: 1rem }.rem-small { font-size: .6rem }.rem-big { font-size: 1.5rem } /* color the border of the active button */ body.fontsize #b1, html.fontsize #b2 { border-color:red; }

 <,--HTML --> <button onclick="fontsize_1()" id="b1">FontSize, body</button> <button onclick="fontsize_2()" id="b2">FontSize, html</button> <table width=100%><tr> <td> <p>No font size</p> <p class="px">Font size in px</p> </td> <td> <div class="rem-big">Big font size in rem</div> <div class="rem">Font size in rem</div> <div class="rem-small">Small font size in rem</div> </td> </tr></table>

（我不得不使用document.querySelector("html")而不是document.html因為否則它不能在 stackoverflow 片段中工作）

如何將字體大小按鈕添加到我的網站 HTML、JavaScript 和 CSS？

問題描述

3 個解決方案

解決方案1
-1 2022-08-23 17:14:38

解決方案2
-1 2022-08-23 19:23:03

解決方案3
-2 已采納 2022-08-23 17:28:09

如何將字體大小按鈕添加到我的網站 HTML、JavaScript 和 CSS？

問題描述

3 個解決方案

解決方案1 -1 2022-08-23 17:14:38

解決方案2 -1 2022-08-23 19:23:03

解決方案3 -2 已采納 2022-08-23 17:28:09

解決方案1
-1 2022-08-23 17:14:38

解決方案2
-1 2022-08-23 19:23:03

解決方案3
-2 已采納 2022-08-23 17:28:09