jquery change span-Front-end Q&A-php.cn

jquery change span

WBOY

Release： 2023-05-14 13:35:36

Original

2615 people have browsed it

Using jQuery to change span, you can easily add interactive effects to the web page, allowing users to have a better experience with the interface. This article will introduce several common methods of changing span using jQuery.

1. Change span content

Changing span content is the most common operation. You can use the .text() method or the .html() method to change the content of the span. The .text() method is used to set or return the text content of the element, and the .html() method is used to set or return the HTML content of the element.

The following is an example. When the user clicks the button, the text content of a span element will be changed:

<!DOCTYPE html>
<html>
<head>
    <title>更改span内容</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $("#change-text-btn").click(function() {
            $("#text-span").text("Hello, world!");
        });
    });
    </script>
</head>
<body>
    <button id="change-text-btn">更改文本</button>
    <span id="text-span">原始文本</span>
</body>
</html>

Copy after login

Clicking the button will change the text of the span element to "Hello, world!" .

2. Change the span style

In addition to changing the span content, you can also use jQuery to change the span style, such as text color, font size, etc. This can be achieved through the .css() method. The .css() method is used to get or set the CSS property value of an element.

The following is an example. When the user clicks the button, the color and font size of a span element will be changed:

<!DOCTYPE html>
<html>
<head>
    <title>更改span样式</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $("#change-style-btn").click(function() {
            $("#style-span").css("color", "red");
            $("#style-span").css("font-size", "30px");
        });
    });
    </script>
    <style>
    #style-span {
        color: black;
        font-size: 16px;
    }
    </style>
</head>
<body>
    <button id="change-style-btn">更改样式</button>
    <span id="style-span">原始样式</span>
</body>
</html>

Copy after login

Clicking the button will change the color and font size of the span element to red. Change to 30 px.

3. Change span attributes

You can also use jQuery to change span attributes, such as id, class, etc. This can be achieved through the .attr() method. The .attr() method is used to get or set the attribute value of an element.

The following is an example. When the user clicks the button, the id and class attributes of a span element will be changed:

<!DOCTYPE html>
<html>
<head>
    <title>更改span属性</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        $("#change-attr-btn").click(function() {
            $("#attr-span").attr("id", "new-id");
            $("#attr-span").attr("class", "new-class");
        });
    });
    </script>
    <style>
    .new-class {
        color: red;
        font-size: 20px;
    }
    </style>
</head>
<body>
    <button id="change-attr-btn">更改属性</button>
    <span id="attr-span">原始属性</span>
</body>
</html>

Copy after login

Clicking the button will change the id of the span element to "new- id", the class is changed to "new-class", and a new style is set at the same time.

Summary

The above are three commonly used jQuery methods to change span. These methods can help you create better interactions on web pages and enhance user experience. It should be noted that jQuery methods should also be used with caution to avoid affecting web page performance.

The above is the detailed content of jquery change span. For more information, please follow other related articles on the PHP Chinese website!