jQueryのスパン変更-フロントエンドQ&A-php.cn

jQueryのスパン変更

WBOY

リリース： 2023-05-14 13:35:36

オリジナル

2592 人が閲覧しました

jQuery を使用してスパンを変更すると、Web ページにインタラクティブな効果を簡単に追加でき、ユーザーはインターフェイスのエクスペリエンスを向上させることができます。この記事では、jQuery を使用してスパンを変更する一般的な方法をいくつか紹介します。

1. スパンコンテンツの変更

スパンコンテンツの変更は、最も一般的な操作です。 .text() メソッドまたは .html() メソッドを使用して、スパンのコンテンツを変更できます。 .text() メソッドは要素のテキストコンテンツを設定または返すために使用され、.html() メソッドは要素の HTML コンテンツを設定または返すために使用されます。

次は例です。ユーザーがボタンをクリックすると、span 要素のテキストの内容が変更されます:

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

ログイン後にコピー

ボタンをクリックすると、span 要素のテキストが " に変更されます。こんにちは世界！" 。

2. スパンスタイルを変更する

スパンの内容を変更するだけでなく、jQuery を使用してテキストの色やフォントサイズなどのスパンスタイルを変更することもできます。これは .css() メソッドを通じて実現できます。 .css() メソッドは、要素の CSS プロパティ値を取得または設定するために使用されます。

次は例です。ユーザーがボタンをクリックすると、span 要素の色とフォントサイズが変更されます:

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

ログイン後にコピー

ボタンをクリックすると、span 要素の色とフォントサイズが変更されますスパン要素を赤に変更し、30 ピクセルに変更します。

3. スパン属性の変更

jQuery を使用して、ID、クラスなどのスパン属性を変更することもできます。これは .attr() メソッドを通じて実現できます。 .attr() メソッドは、要素の属性値を取得または設定するために使用されます。

次は例です。ユーザーがボタンをクリックすると、span 要素の id および class 属性が変更されます:

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

ログイン後にコピー

ボタンをクリックすると、span 要素の ID が変更されます「new-id」に変更すると、クラスが「new-class」に変更され、同時に新しいスタイルが設定されます。

概要

上記は、スパンを変更するためによく使用される 3 つの jQuery メソッドです。これらの方法は、Web ページ上でより良いインタラクションを作成し、ユーザーエクスペリエンスを向上させるのに役立ちます。 Web ページのパフォーマンスへの影響を避けるために、jQuery メソッドも注意して使用する必要があることに注意してください。

以上がjQueryのスパン変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。