jQuery を使用してテキストの色とサイズを動的に変更するにはどうすればよいですか?

jQuery を使用した動的テキストのカスタマイズ

jQuery を使用して Web 要素にインタラクティブ性を追加する場合、一般的なタスクの 1 つは、ホバーまたはその他のイベントでのテキストの外観を変更することです。 。この記事では、jQuery を使用してテキストの色とサイズを変更する方法について説明します。

jQuery を使用してテキストの色を変更する

ホバー時のテキストの色を変更するには、 jQuery マウスオーバー イベント ハンドラー:

$(this).css('color', 'red');

たとえば、次の HTML 要素がある場合:

<p></p>

次のように、ホバー時に色を赤に変更する jQuery コードを追加できます。 :

$('#text').mouseover(function() {
   $(this).css('color', 'red');
});

色とサイズの同時変更

複数の CSS 属性を同時に調整することも可能です。ホバー時にテキストの色とサイズの両方を変更するには、たとえば次のようにします。

$(this).css({ 'color': 'red', 'font-size': '150%' });

一般的な CSS 属性の操作

.css() jQuery 関数を使用すると、任意の値を設定できます。要素の CSS 属性。これにより、要素の外観をその場でカスタマイズするための優れた柔軟性が得られます。

以上がjQuery を使用してテキストの色とサイズを動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。