JavaScript 允许用户更改网页的字体大小

如果你看过一些网站，特别是一些印度政府门户网站，你会注意到页面右上角有三个小按钮，看起来像这样： -A A A+ 。这些按钮通常允许网站用户更改整个页面或页面的某个部分的字体大小以提高页面的可读性。在这篇文章中，我们将学习如何使用JavaScript为特定的div实现这个功能。然而，使用这些按钮只提供了一些选项来更改字体大小。使用HTML滑块允许用户从广泛的范围内选择字体大小，从而给用户更多的选择。因此，除了按钮之外，我们还将使用HTML滑块来实现相同的功能。

方法：

定义包含<div>标签、滑块和3个按钮的<p>标签。
创建一个JavaScript函数来更改div部分内容的字体大小。使用OnClick()事件来处理按钮点击和移动滑块时的OnChange()事件。
在按钮点击的情况下，使用DOM访问<div>标签来自JavaScript更改字体大小属性的值。
在滑块移动的情况下，再次使用DOM访问用户设定的滑块值，并将此值作为<div>标签的字体大小值。

我们将按照上述方法逐步构建字体大小控制器。

步骤1： 创建一个简单的HTML页面，其中包含三个按钮、一个包含段落的div和一个滑块。我们将使用按钮或滑块来更改此div内容的字体大小。我们只会应用必要的CSS样式。

步骤2： 我们将编写一个JavaScript函数，当用户点击按钮或移动滑块时，更改div的字体大小。通过使用JavaScript事件来观察此更改。使用onClick()事件观察用户是否点击了按钮，使用onChange()事件观察用户是否移动了滑块。为这两个触发事件创建两个函数（即onClick和onChange）。

HTML

<!DOCTYPE html> 
<html> 
  
<body> 
    <center> 
        <h1 style="color: green">GeeksForGeeks</h1> 
        <button type="button" name="btn1">-A</button> 
        <button type="button" name="btn2">A</button> 
        <button type="button" name="btn3">A+</button> 
        <br /><br /> 
        <div style="padding: 20px; margin: 50px; 
            font-size: 20px; border: 5px solid green;" 
            id="container" class="container"> 
              
            <p> 
                A Computer Science portal for geeks.  
                It contains well written, well thought  
                and well explained computer ming science  
                and programarticles,quizzes and practice/  
                competitive programming/company interview  
                questions. 
            </p> 
        </div> 
  
        <input type="range" min="10" max="30" 
                    id="slider" value="20" /> 
    </center> 
</body> 
  
</html>

Javascript

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; 
}