Using jQuery to Change the Font Size of a Paragraph

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:

  
We will change the font size of this text.

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.

  
This is some text
  
This is some text
  
Change font size

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:

Full Code:

  
This is some text
  
This is some text
  
Change font size


<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.