Increase and Decrease Font Size using jQuery

In this article, I am going to discuss Increase and Decrease Font Size using jQuery with Examples. Please read our previous article, where we discussed jQuery Show Hide Password. At the end of this article, you will learn how to Increase and Decrease Font Size using jQuery.

Example:

Please have a look at the below example code and then we will understand the code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    .demo {
      max-width: 900px;
      min-height: 500px;
      height: auto;
      padding: 20px;
      margin: 20px;
      background-color: #e3e3e3;
      line-height: 2;
      font-size: 16px;
      font-weight: 600;
      font-style: italic;
      box-shadow: 0 10px 14px 0 rgba(0, 0, 0, 0.20),
        0 14px 45px 0 rgba(0, 0, 0, 0.15);
      ;
    }

    .demo h1,
    p {
      padding: 10px;
      text-align: center;
    }

    .btn {
      background-color: #1c4450;
      border: none;
      outline: none;
      color: white;
      padding: 20px 35px;
      margin: 20px;
      text-align: center;
      display: inline-block;
      font-size: 16px;
      border-radius: 10px;
      cursor: pointer;
      transition-duration: 0.4s;
      text-transform: uppercase;
    }

    .btn:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
        0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }

    .buttons {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
      margin: 20px;
    }
  </style>
</head>
<body>
  <div class="demo">
    <h1>This is the header</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quaerat molestiae mollitia similique minima
      laboriosam commodi, praesentium soluta! Sapiente quia a tenetur quo officiis magni, placeat facilis sint
      distinctio temporibus, nesciunt labore, quae alias ipsum ut. Minus cupiditate ad quibusdam. Est, dolore. Incidunt
      dolorum esse doloremque similique! Expedita, alias dolorum. Eius id amet delectus repellat corporis distinctio
      doloribus, ea assumenda beatae praesentium nemo. Perspiciatis aliquid nemo nisi fuga totam? Unde tempora, esse et
      assumenda quae, enim facilis odit quas consequatur, exercitationem aspernatur hic! Temporibus ducimus amet
      laboriosam esse quasi dolore libero officiis cum voluptatum praesentium. Delectus iure tempora exercitationem
      obcaecati.</p>
  </div>
  <div class="buttons">
    <button class="btn" id="increase">Increase Font Size</button>
    <button class="btn" id="decrease">Decrease Font Size</button>
    <button class="btn" id="reset">Reset</button>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      $('#increase').click(function () {
        modifyFontSize('increase');
      });

      $('#decrease').click(function () {
        modifyFontSize('decrease');
      });

      $('#reset').click(function () {
        modifyFontSize('reset');
      })

      function modifyFontSize(action) {
        var divElement = $('.demo');
        var currentFontSize = parseInt(divElement.css('font-size'));

        if (action == 'increase')
          currentFontSize += 3;
        else if (action == 'decrease')
          currentFontSize -= 3;
        else
          currentFontSize = 16;
        divElement.animate({ 'fontSize': currentFontSize }, 300);
      }
    });
  </script>
</body>
</html>

Steps

Firstly we have created a function modifyFontSize( action ). Inside that, we have retrieved the current font size of the divElement. Then

if the action parameter receives the value increase, we are incrementing currentFontSize by 3
if the action parameter receives the value decrease, we are decrementing currentFontSize by 3
Else we are setting the curentFontSize to default 20px.

Then if the increase button is clicked then we are invoking the function modifyFontSize() with argument increase i.e. modifyFontSize( increase ) and the same with the decrease and reset button

Output

Now run the above code and you will get the following output.

Now click on the INCREASE FONT SIZE button, and you will see that the font size of the text increases as shown in the below image.

Now click on the RESET button, and you will see that the font size of the text will become normal as shown in the below image.

Now click on the DECREASE FONT SIZE button, and you will see that the font size of the text decreases as shown in the below image.

In the next article, I am going to discuss how to make a floating div using jQuery with Examples. Here, in this article, I try to explain how to Increase and Decrease Font Size using jQuery with Examples and I hope you enjoy this Increase and Decrease Font Size using jQuery article.

Dot Net Tutorials

About the Author: Pranaya Rout

Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.