Before reading this article, please go through the following articles:
-
Part 1: Introduction to jQuery
-
Part 2: How to Select Elements or Nodes in jQuery
-
Part 3: How to Filter in jQuery
Objective
In this article we will learn application of CSS on HTML Elements using jQuery. On the click of event of a button we will increase or decrease the FontSize of the text. See the following video for the expected output.
You may come across a scenario when you need to apply CSS styling on a DOM element at runtime. For example on the click event of a button you may want to increase or decrease font size of the Paragraph Text. jQuery allows to apply or remove CSS on HTML elements.
![Image 1.jpg]()
Assume we have HTML as in the following. There are two buttons on the HTML, one to increase the font of the text in the paragraph element and another to decrease the font size.
Code Listing 1
<body>
<h1>CSS styling using jQuery</h1>
<p id="infopara">
Cricket is a bat-and-ball game played between two teams of 11 players on a field,
at the centre of which is a rectangular 22-yard long pitch. One team bats,
trying to score as many runs as possible while the other team bowls and fields,
trying to dismiss the batsmen and thus limit the runs scored by the batting team.
A run is scored by the striking batsman hitting the ball with his bat,
running to the opposite end of the pitch and touching the crease there without being dismissed.
The teams switch between batting and fielding at the end of an innings.
</p>
<button id="btnincreasefont" type=button onclick="">Increase Font</button>
<button id="btndecreasefont" type=button onclick="">Decrease Font</button>
</body>
In the browser you should get rendered HTML as follows:
![Image 2.jpg]()
Now on the click event of the buttons we want to increase and decrease the font size of the paragraph text. First attach a click event to the button. The Click event can be bound to the button as below:
![Image 3.jpg]()
After attaching the click event to the button we need to read the current font size of the text. To read that value select the HTML element <p> with id and apply css selector with the fontSize attribute to read the current font size. You can the read current font size as given below:
![Image 4.jpg]()
If you alert divcurrentfont then you will get the font size as follows:
![Image 5.jpg]()
Now we need to convert the current font size to an integer value and we can do that as follows:
![Image 6.jpg]()
If you alert divcurrentfontinnumber then you will get the integer part of the font size as follows:
![Image 7.jpg]()
Next we need to extract the unit part of the font. We can do that as follows:
![Image 8.jpg]()
On alert you will get the unit as in the following:
![Image 9.jpg]()
After this we need to modify the font size value as per our requirement. In this case I am going to increase the font size twice with each button click. We can multiply the font size by 2 as in the following:
![Image 10.jpg]()
Last but not least we need to set the fontSize value. To do this select element with id and set fontSize argument in css function. We can set the fontSize as in the following:
![Image 11.jpg]()
On consolidating codes from the above discussion we may have the following jQuery code to increase the font size of the paragraph text on the click event of the button.
![Image 12.jpg]()
To decrease the font size we need to follow same steps but rather than multiplying the font size by 2, we will divide it by 2.
![Image 13.jpg]()
Find full jQuery source code to increase and decrease the font size in CodeListing2. CodeListing1 is used as HTML for CodeListing2.
Code Listing 2
<script type="text/javascript">
$(document).ready(function () {
$('#btnincreasefont').click(function () {
var divcurrnetfont = $('#infopara').css('fontSize');
var divcurrentfontinnumber = parseInt(divcurrnetfont, 10);
var unitusedinfont = divcurrnetfont.slice(-2);
divcurrentfontinnumber *= 2;
$('#infopara').css('fontSize', divcurrentfontinnumber + unitusedinfont);
});
$('#btndecreasefont').click(function () {
var divcurrnetfont = $('#infopara').css('fontSize');
var divcurrentfontinnumber = parseFloat(divcurrnetfont, 10);
var unitusedinfont = divcurrnetfont.slice(-2);
divcurrentfontinnumber /= 2;
$('#infopara').css('fontSize', divcurrentfontinnumber + unitusedinfont);
});
});
</script>
I hope you find this article useful. You may find previous articles of this series useful too.
Thanks for reading.