To change the font size of a paragraph using jQuery, we simply can use the css() method to change the styles of an element.
$("#p1").css("font-size", "12px");
Let’s say we have the following HTML:
<div id="div1">
<p>We will change the font size of this text.</p>
</div>
If we want to change the font size of the paragraph to “12px”, we will use the jQuery css() method in the following JavaScript code.
$("#div1 p").css("font-size", "12px");
If you are using WordPress, don’t forget to change the $ to jQuery as below:
jQuery("#div1 p").css("font-size", "12px");
Using jQuery to Change the Font Size of Text with a Click
To change the font size of text using jQuery, we can combine the css() method with a click event.
Let’s say we have the following HTML and we want to change the font size of the first paragraph to 12px.
<div>
<p id="p1">This is some text</p>
<p id="p2">This is some text</p>
<div id="click-me">Change font size</div>
</div>
We can utilize both the jQuery click() and css() methods to change the font size of the first line of text and make it smaller.
Here is the JavaScript code:
$("#click-me").click(function(){
$("#p1").css("font-size", "12px");
});
The final code and output for this example of how to change the text font size using jQuery is below:
Code Output:
This is some text
This is some text
Full Code:
<div>
<p id="p1">This is some text</p>
<p id="p2">This is some text</p>
<div id="click-me">Change font size</div>
</div>
<script>
$("#click-me").click(function(){
$("#p1").css("font-size", "12px");
});
</script>
Hopefully this article has been useful for you to understand how to use jQuery to change the font size of some text.
Leave a Reply