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

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

方法：

1. 定义由

   标签、滑块和 3 个按钮组成的

   标签。
2. 制作一个 JavaScript函数来更改 div 部分中内容的字体大小。使用OnClick()事件单击按钮并移动滑块，使用OnChange()事件。
3. 在单击按钮的情况下，使用 DOM 访问
   标记以从 javascript 本身更改 font-size 属性的值。  
4. 在移动滑块的情况下，再次使用 DOM 访问用户设置的滑块的值，并将该值用作
   标签的 font-size 值。

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

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

HTML

  

    
        
GeeksForGeeks
        -A
        A
        A+
        


        

              
            

                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.
            
        
  
        
    

  

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

对于按钮功能，将为onClick事件创建一个参数化函数，其中每个按钮将发送一个唯一的数字，该数字将是 div 的字体大小。使用文档对象模块 (DOM)，我们可以访问我们的

标签并从 javascript 本身更改 font-size 属性的值。

对于 Slider 功能，将为onChange事件创建一个普通的非参数化函数。使用文档对象模块 (DOM)，我们可以访问用户设置的滑块的值，并将该值用作

标签的字体大小值。

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

第三步：给按钮和滑块的事件属性添加相应的功能。单击按钮或移动滑块，您应该会看到要更改的 div 内容的字体大小。

完整代码：

HTML

  

    
        GeeksForGeeks
        
            -A
        
          
        
            A
        
  
        
            A+
        
        
  
        
              
            
                A Computer Science portal for geeks. 
                It contains well written, well thought 
                and well explained computer scienc and 
                programming articles quizzes and practice/ 
                competitive programming/company interview 
                questions.
            
        
  
        
    
  
    
        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;
        }
    

  

输出：

使用 JavaScript 更改字体大小