如何通過單擊按鈕來增加或減少頁面的字體大小

Question

我正在嘗試使用 javascript 增加頁面的 fonts 大小。 我有這段代碼，但它沒有按預期工作。 有人可以檢查我做錯了什么嗎？

這是 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 代碼和<script src="script.js"></script>注入 javascript 代碼的主體（引號中是文件的路徑和名稱）

現在，您唯一的錯誤是要修改字體，必須添加字體單位類型，無論是px 、 rem 、 em等...

我把你的代碼留在這里，html、css 和 javaScript 分開。 此外，當涉及到buttons時，您可以為每個button添加一個value ，並在以后使用它來更改字體大小。

最后，不要使用<center> ，因為它已被棄用。 而是使用 div 作為容器並添加text-align: center或任何其他類型的形狀以使您的內容居中。 中心已棄用 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>

如何通過單擊按鈕來增加或減少頁面的字體大小

問題描述

2 個解決方案

解決方案1
1 2022-01-09 19:53:07

解決方案2
1 已采納 2022-01-09 20:10:14

如何通過單擊按鈕來增加或減少頁面的字體大小

問題描述

2 個解決方案

解決方案1 1 2022-01-09 19:53:07

解決方案2 1 已采納 2022-01-09 20:10:14

解決方案1
1 2022-01-09 19:53:07

解決方案2
1 已采納 2022-01-09 20:10:14