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:

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

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.