jqueryの要素にクラス名を追加する方法-jsチュートリアル-php.cn

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

WBOY

リリース： 2021-11-23 09:34:00

オリジナル

3617 人が閲覧しました

クラス名を要素に追加する 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><p>css コード: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><style> .fs40{ font-size: 40px; } </style></pre><div class="contentsignin">ログイン後にコピー</div></div><p>2. jquery ライブラリを導入します。 <style> タグの後に jquery ライブラリを導入します。 <scriptp> タグを作成し、タグ内の addClass() メソッドを使用してクラスを <div> タグに追加します。 </p><p>js コード: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><script type="text/javascript"> function addBtn(){ $("#add").addClass("fs40") } </script></pre><div class="contentsignin">ログイン後にコピー</div></div><p>HTML コードページを保存し、ブラウザで開き、ボタンアイコンをクリックすると、<div> タグのフォントが大きくなっていることがわかります。クラス class が正常に追加されたことを示します。 </p><p>ページ上のすべてのコード。すべてのコードを直接コピーして新しい HTML ページに貼り付け、jquery ライブラリの導入パスを変更し、HTML コードを保存してブラウザで開き、ボタンをクリックして効果を確認できます。 </p><p>すべてのコード: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><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の要素にクラス名を追加する方法