CSS and JavaScript Code to increase and decrease font size of text.

To add functionality of increasing and decreasing size of text in the post you need the following codes.

let us suppose I have a content in a div whose id is “content”.

FOR DIV

<!-- BUTTON FOR INCREASING AND DECREASING -->
<div class="textcontrols">
<button id="decreasetext"> <span>A</span></button>
<button role="button" id="resettext"><span>A</span></button>
<button role="button" id="increasetext"><span>A</span></button>
</div>

<!-- BELOW IS THE PLACE WHERE YOU WANT TO PASTE YOUR CONTENT -->

<div id="content">
Put Your Content Here!!!
This Content has to be increased or decreads
Try pressing the buttons.
</div>

The second step is to style the button. Below is my style. You can change the style if you want.

<style type="text/css">

/* text-controls */
.textcontrols {
padding: 0;
margin:10px 0;
/*background: #ccc;*/
}

.textcontrols button {
vertical-align: bottom;
margin: 0 1px;
padding: 0 0.1125em;
background-color: #fff;
color: #e52b1e;
padding: 5px 10px;
font-weight: bolder;
-webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
box-shadow: 0 0 10px 0 rgb(0 20 0 / 10%);

border:none;
border: 1px solid #999;
}
.textcontrols button:hover{
color:#fff;
background-color: #e52b1e;
}

button#increasetext {
font-size: 17px;
}

button#resettext {
font-size: 14px;

}

button#decreasetext {
font-size: 11px;

}


#content p{
text-align: justify;
line-height: 2rem !important;

}

/* content */
#content>* {
font-size: 18px;
}
/* demo container */
</style>

Now the last part is to use javascript. I am using jquery for this. I have also put CDN link along with the code.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script type="text/javascript">
// Increase/descrease font size
$('#increasetext').click(function() {
curSize = parseInt($('#content').css('font-size')) + 2;
if (curSize <= 32)
$('#content').css('font-size', curSize);
});
$('#resettext').click(function() {
if (curSize != 18)
$('#content').css('font-size', 18);
});
$('#decreasetext').click(function() {
curSize = parseInt($('#content').css('font-size')) - 2;
if (curSize >= 10)
$('#content').css('font-size', curSize);
});

</script>

The complete Code looks like this

<!DOCTYPE html>
<html>
<head>
  <title>Increase And Decrease Conent By Buttons.</title>
   
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>

<style type="text/css">

/* text-controls */
.textcontrols {
  padding: 0;
  margin:10px 0;
  /*background: #ccc;*/
}

.textcontrols button {
  vertical-align: bottom;
  margin: 0 1px;
  padding: 0 0.1125em;
  background-color: #fff;
  color: #e52b1e;
    padding: 5px 10px;
    font-weight: bolder;
    -webkit-box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 0 10px 0 rgb(0 20 0 / 10%);
   
    border:none;
    border: 1px solid #999;
}
.textcontrols button:hover{
  color:#fff;
  background-color: #e52b1e;
}

button#increasetext {
  font-size: 17px;
}

button#resettext {
  font-size: 14px;
  
}

button#decreasetext {
  font-size: 11px;
  
}


#content p{
    text-align: justify;
    line-height: 2rem !important;

  }

/* content */
#content>* {
  font-size: 18px;
}
/* demo container */
</style>
</head>
<body>

  <!-- BUTTON FOR INCREASING AND DECREASING -->
<div class="textcontrols">
<button id="decreasetext"> <span>A</span></button>
<button role="button" id="resettext"><span>A</span></button>
<button role="button" id="increasetext"><span>A</span></button>
</div>

<div id="content">
    Put Your Content Here!!! 
    This Content has to be increased or decreads
    Try pressing the buttons.
</div>




</body>

<div id="container-fluid">

    <script type="text/javascript">
        // Increase/descrease font size
  $('#increasetext').click(function() {
    curSize = parseInt($('#content').css('font-size')) + 2;
    if (curSize <= 32)
      $('#content').css('font-size', curSize);
  });
  $('#resettext').click(function() {
    if (curSize != 18)
      $('#content').css('font-size', 18);
  });
  $('#decreasetext').click(function() {
    curSize = parseInt($('#content').css('font-size')) - 2;
    if (curSize >= 10)
      $('#content').css('font-size', curSize);
  });


    </script>

</html>

Post Views: 1,357