Font Size Adjustment using JavaScript in HTML

Submitted by alpha_luna on Friday, June 24, 2016 - 16:10.

This simple project will show to the user how to increase and decrease the font size of text content in a one div class automatically using jQuery in HTML. Hope this tutorial will help you from your projects.

Creating Markup

Creating select element and the DIV tag where the text content located. Copy and paste this simple HTML source code to your BODY tag of your page.

<center>
<h2>Adjust Font Size:</h2>
<br />
<select id="zoom_Text">
        <option value="15">15 px </option>
        <option value="20">20 px</option>
        <option value="30">30 px</option>
        <option value="45">45 px</option>
        <option value="50">50 px</option>
        <option value="70">70 px</option>
</select>
<br />
<div id="container">
        <div class="content">
                <h2>Free Source Code</h2>
                Do you have source code, articles, tutorials, web links, and books to share? You can write your own content here. You can even have your own blog. 
        </div>
</div>
</center>

This is the result of the source code above as shown in the image below. Result

JavaScript Source Code

Kindly copy and paste this link and script to your HEAD tag of your page.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
 
$("#zoom_Text").change(function() 
{
var size = $(this).val();
 
$("#container").css('font-size', size+'px');
 
return false;
        });
        });
</script>

Result

For the 15px font size.

For the 20px font size.

For the 30px font size.

Hope that this tutorial will help you a lot. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

56 views