jQuery change font style on button click

In front-end design, font style is an integral part of the page. If you want to let the user change the font style when they click a button, jQuery is a very convenient way to do it. In this article, we will show you how to use jQuery to change the font style on a click of a button.

Preparation

Before you start, you need to make sure you have made the following preparations:

1. Introducing the jQuery library

In HTML In the document, the jQuery library needs to be introduced. You can choose to use a CDN or download jQuery locally and then introduce it into the document. The following is an example of citing CDN:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Preparing CSS styles

In the CSS file, you need to write some styles as the font style changes when the button is clicked. The following is an example:

.change {
  font-size: 20px;
  font-weight: bold;
  color: #00bfff;
}

In this example, we define a class named ".change". When this class is added to an element, it will apply font size, weight, and color changes.

Steps

1. Add a click event listener

First, we need to add a click event listener on the button to respond to the button being clicked event. Here is an example:

$("button").click(function() {
  // 在此处添加代码 
});

In this example, we used a jQuery selector to select all buttons and added a click event listener for them. When the button is clicked, we will execute some code in the listener function.

2. Select elements and change styles

In the listener function of the click event, we can achieve the effect of clicking the button to change the font style by selecting the element and changing the style. Here is an example:

$("button").click(function() {
  // 选择元素并改变样式
  $("p").toggleClass("change");
});

In this example, we use jQuery selector to select all paragraph elements and use the toggleClass method to toggle their class names. When the class name is ".change", all paragraph elements will have the previously defined style change applied. When the class name is removed, the paragraph element will revert to its original style.

Complete example

The following is a complete HTML, CSS and JavaScript code example to achieve the effect of clicking a button to change the font style.

  
  
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $("p").toggleClass("change");
      });
    });
  </script>


  改变字体样式
  
这是一个段落元素。
  
这是另一个段落元素。

In this example, we have added a button and two paragraph elements to the page. When the button is clicked, the font size, weight, and color of the paragraph element will change.

The above is the detailed content of jQuery change font style on button click. For more information, please follow other related articles on the PHP Chinese website!