Increase decrease font size using jquery04:33

  • 0
Published on December 11, 2017

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

In this video we will discuss how to increase, decrease and reset font size using jQuery

Replace < with LESSTHAN symbol and > with GREATERTHAN symbol

.divClass {
font-size: 16px;
background-color: #E3E3E3;
width: 500px;
padding: 5px;
<script src=”jquery-1.11.2.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(‘#linkIncrease’).click(function () {

$(‘#linkDecrease’).click(function () {

$(‘#linkReset’).click(function () {

function modifyFontSize(flag) {
var divElement = $(‘#divContent’);
var currentFontSize = parseInt(divElement.css(‘font-size’));

if (flag == ‘increase’)
currentFontSize += 3;
else if (flag == ‘decrease’)
currentFontSize -= 3;
currentFontSize = 16;

divElement.css(‘font-size’, currentFontSize);
<body style=”font-family:Arial”>
<a id=”linkIncrease” href=”#”>Increase</a>
<a id=”linkDecrease” href=”#”>Decrease</a>
<a id=”linkReset” href=”#”>Reset</a>
<br /><br />
<div id=”divContent” class=”divClass”>
<b>jQuery Tutorial</b>
<li>What is jQuery</li>
<li>What is $(document).ready(function() in jquery</li>
<li>Benefits of using CDN</li>
<li>#id selector</li>
<li>Element Selector</li>
<li>class selector</li>
<li>attribute selector</li>
<li>attribute value selectors</li>
<li>case insensitive attribute selector</li>
<li>jQuery input vs :input</li>

Enjoyed this video?
"No Thanks. Please Close This Box!"