Part3: How to Filter in jQuery
Part 2: How to Select Elements or Nodes in jQuery
Part1: Introduction to jQuery
In this post we will learn applying CSS on HTML Elements using jQuery. On click of event of button we will increase or decrease FontSize of the text. See the below video for the expected output
You may come across scenario when you need to apply CSS styling on DOM element at the run time. For example on click event of button you may want to increase or decrease font size of the Paragraph Text. jQuery allows to apply or remove CSS on HTML elements.
Assume we have HTML as following. There are two buttons on the HTML, one to increase the font of the text in 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 browser you should get rendered HTML as following
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. Click event can be bind to button as below,
After attaching click event to button we need to read current font size of the text. To read that value select HTML element <p> with id and apply css selector with fontSize attribute to read current font size applied. You can read current font size as given below
If you alert divcurrentfont , you will get font size as following
Now we need to convert current font size to an integer value and we can do that as following
If you alert divcurrentfontinnumber, you will get integer part of font size as following
Next we need to extract unit part of font. We can do that as following
On alert you will get unit as following
After this we need to modify font size value as per our requirement. In this case I am going to increase font size twice with each button click. We can multiply font size by 2 as following
Last but not least we need to set fontSize value. To do this select element with id and set fontSize argument in css function. We can set fontSize as following
On consolidating codes from above discussion we may have following jQuery code to increase font size of paragraph text on click event of button.
To decrease font size we need to follow same steps but rather than multiplying font size by 2, we will divide by 2.
Find full jQuery source code to increase and decrease the font size in CodeListing2. CodeListing1 is used as HTML for CodeListing2.
CodeListing2
<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 post useful. You may find previous posts of this series useful too.
Part3: How to Filter in jQuery
Part 2: How to Select Elements or Nodes in jQuery
Part1: Introduction to jQuery
Thanks for reading.
