ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryの要素にクラス名を追加する方法

jqueryの要素にクラス名を追加する方法

WBOY
WBOYオリジナル
2021-11-23 09:34:003680ブラウズ

クラス名を要素に追加する Jquery メソッド: 1. "$(element)" ステートメントを使用して要素オブジェクトと一致させます; 2. addClass() メソッドを使用して要素にクラス名を追加します。は「要素 object.addClass( "追加するクラス名")」です。

jqueryの要素にクラス名を追加する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.0 バージョン、Dell G3 コンピューター。

jquery の要素にクラス名を追加する方法

1. 新しい HTML ページを作成し、テキストを追加します。

を HTML ページとクリック イベント ボタンに追加し、ボタンにクリック イベントを追加します。

html コード:

<div id="add">点击按钮添加class</div>
<input type="button" value="添加class" onclick="addBtn()" />

クラス class のスタイルを追加します。

タグの後に <style> タグを作成し、そのタグにフォント サイズのスタイル クラスを設定します。 <p>css コード: <pre class="brush:css;toolbar:false"><style> .fs40{ font-size: 40px; } </style></pre><p>2. jquery ライブラリを導入します。 <style> タグの後に jquery ライブラリを導入します。 <scriptp> タグを作成し、タグ内の addClass() メソッドを使用してクラスを <div> タグに追加します。 <p>js コード: <pre class="brush:js;toolbar:false"><script type="text/javascript"> function addBtn(){ $("#add").addClass("fs40") } </script></pre><p>HTML コード ページを保存し、ブラウザで開き、ボタン アイコンをクリックすると、<div> タグのフォントが大きくなっていることがわかります。クラス class が正常に追加されたことを示します。 <p>ページ上のすべてのコード。すべてのコードを直接コピーして新しい HTML ページに貼り付け、jquery ライブラリの導入パスを変更し、HTML コードを保存してブラウザで開き、ボタンをクリックして効果を確認できます。 <p>すべてのコード: <pre class="brush:js;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> <style> .fs40{ font-size: 40px; } </style> <script type="text/javascript"> function addBtn(){ $("#add").addClass("fs40") } </script> <div id="add">点击按钮添加class</div> <input type="button" value="添加class" onclick="addBtn()" />

出力結果:

jqueryの要素にクラス名を追加する方法##関連ビデオ チュートリアルの推奨事項:

jQuery ビデオ チュートリアル

以上がjqueryの要素にクラス名を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。