如何通过单击按钮来增加或减少页面的字体大小答案

【问题标题】：How can I increase or decrease font size of page by clicking on a button如何通过单击按钮来增加或减少页面的字体大小
【发布时间】：2022-01-09 19:42:25
【问题描述】：

我正在尝试使用 javascript 增加页面的字体大小。我有这段代码，但它没有按预期工作。有人可以检查我做错了什么吗？

这里是 HTML 和 javascript 代码：

<body>
<center>
    <button type="button"
        onclick="changeSizeByBtn(15)" name="btn1">
        -A
    </button>
    
    <button type="button"
        onclick="changeSizeByBtn(20)" name="btn2">
        A
    </button>

    <button type="button" onclick="changeSizeByBtn(25)"
        name="btn3">
        A+
    </button>
    <br /><br />

    <div style="padding: 20px; margin: 50px;
        font-size: 20px; border: 5px solid red;"
        id="container" class="container">
        
        <p>
            I need to increase this texts here by clicking on A+ button and decrease them by clicking -A button above.<br> 
            Or increase and decrease them by draging the range below to left or right<br> What is wrong in my code?
        </p>
    </div>

    <input type="range" min="10" max="100" id="slider"
        onchange="changeSizeBySlider()" value="40" />
</center>

<script>
    var cont = document.getElementById("container");

    function changeSizeByBtn(size) {

        // Set value of the parameter as fontSize
        cont.style.fontSize = size;
    }

    function changeSizeBySlider() {
        var slider = document.getElementById("slider");

        // Set slider value as fontSize
        cont.style.fontSize = slider.value;
    }
</script>

【问题讨论】：

标签： javascript html button font-size

【解决方案1】：

确保在设置fontSize（像素、字符、em、rem 等）后添加单位。随意运行下面的 sn-p。

var cont = document.getElementById("container");

function changeSizeByBtn(size) {
  // Set value of the parameter as fontSize
  cont.style.fontSize = size + "px"; // <- HERE
}

function changeSizeBySlider() {
  var slider = document.getElementById("slider");

  // Set slider value as fontSize
  cont.style.fontSize = slider.value + "px"; // <- HERE
}

<body>
  <center>
    <button type="button" onclick="changeSizeByBtn(15)" name="btn1">
      -A
    </button>

    <button type="button" onclick="changeSizeByBtn(20)" name="btn2">
      A
    </button>

    <button type="button" onclick="changeSizeByBtn(25)" name="btn3">
      A+
    </button>
    <br /><br />

    <div
      style="
        padding: 20px;
        margin: 50px;
        font-size: 20px;
        border: 5px solid red;
      "
      id="container"
      class="container"
    >
      <p>
        I need to increase this texts here by clicking on A+ button and decrease
        them by clicking -A button above.<br />
        Or increase and decrease them by draging the range below to left or
        right<br />
        What is wrong in my code?
      </p>
    </div>

    <input
      type="range"
      min="10"
      max="100"
      id="slider"
      onchange="changeSizeBySlider()"
      value="40"
    />
  </center>
</body>

【讨论】：

感谢您提供解决方案。 sn-p 有效，但是当我在浏览器上运行代码时，它不起作用。你知道可能是什么原因吗？
控制台有错误吗？是否能找到容器元素，先尝试console.log出来。

【解决方案2】：

首先我建议你不要混合代码，在html文件中只有html。为此，您可以在标题中添加 <link rel="stylesheet" href="style.css"/> 以添加注入 css 代码和 <script src="script.js"></script> 在正文末尾注入 javascript 代码（引号中是文件的路径和名称）

现在，您唯一的错误是修改字体必须添加字体单元类型，例如px、rem、em 等...

我把你的代码与 html、css 和 javaScript 分开的方式留在这里。此外，当涉及到buttons 时，您可以为每个button 添加一个value 并稍后使用它来更改字体大小。

最后，不要使用<center>，因为它已被弃用。而是使用 div 作为容器并添加 text-align: center 或任何其他类型的形状以使您的内容居中。 Center is deprecated MDN Web Docs

let cont;

function loadEvents() {
    cont = document.getElementById("container");

    let slider = document.getElementById("slider");
    slider.addEventListener("change", () => {
        changeSize(slider.value);
    });

    
    let btns = document.getElementsByClassName("btn");
    for (const btn of btns) {
        btn.addEventListener("click", () => {
            changeSize(btn.value);
        });
    }
}


function changeSize(size) {
    cont.style.fontSize = `${size}px`;
}



// Load the events after loading the DOM elements
addEventListener("DOMContentLoaded", loadEvents);

.primary-container {
  text-align: center;
}

.container {
    padding: 20px;
    margin: 50px;
    font-size: 20px;
    border: 5px solid red;
}

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="style.css" />
        <title>Hello, world!</title>
    </head>

    <body>
        <div class="primary-container">
            <button type="button" class="btn" value="15">-A</button>

            <button type="button" class="btn" value="20">A</button>

            <button type="button" class="btn" value="25">A+</button>
            <br /><br />

            <div id="container" class="container">
                <p>
                    I need to increase this texts here by clicking on A+ button and decrease them by clicking -A button
                    above.<br />
                    Or increase and decrease them by draging the range below to left or right<br />
                    What is wrong in my code?
                </p>
            </div>

            <input type="range" min="10" max="100" id="slider" value="40" />
        </div>

        <script src="script.js"></script>
    </body>
</html>

【讨论】：

感谢朋友。你的建议对我有用。我分离了脚本并且它起作用了。