ホームページ > 記事 > ウェブフロントエンド > jqueryの要素にクラス名を追加する方法
jqueryの要素にクラス名を追加する方法
- WBOYオリジナル
- 2021-11-23 09:34:003628ブラウズ
クラス名を要素に追加する Jquery メソッド: 1. "$(element)" ステートメントを使用して要素オブジェクトと一致させます; 2. addClass() メソッドを使用して要素にクラス名を追加します。は「要素 object.addClass( "追加するクラス名")」です。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.0 バージョン、Dell G3 コンピューター。
jquery の要素にクラス名を追加する方法
1. 新しい HTML ページを作成し、テキストを追加します。
を HTML ページとクリック イベント ボタンに追加し、ボタンにクリック イベントを追加します。 タグの後に <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()" />
html コード:
<div id="add">点击按钮添加class</div> <input type="button" value="添加class" onclick="addBtn()" />
クラス class のスタイルを追加します。