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

Question

我正在尝试使用 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>

Answer 1

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

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>

Answer 2

首先建议大家不要乱码，在html文件中只html。为此，您可以在 header 中添加 <link rel="stylesheet" href="style.css"/> 以添加注入 css 代码，并在 body 末尾添加 <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>

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

How can I increase or decrease font size of page by clicking on a button

html

javascript

button

font-size