jqで元のCSSスタイルを復元する方法

醉折花枝作酒筹
リリース: 2023-01-05 16:14:17
オリジナル
2864 人が閲覧しました

jquery では、addClass() メソッドを使用して元のスタイルに戻すことができます。構文形式は、「$("要素名").addClcss("属性名", "属性値") です。 ";" addClass()" メソッドは、選択した要素に 1 つ以上のクラスを追加しますが、既存のクラス属性は削除されません。

jqで元のCSSスタイルを復元する方法

このチュートリアルの動作環境: Windows 7 システム、jquery バージョン 1.11.1、Dell G3 コンピューター。

test.html という名前の新しい HTML ファイルを作成して、jquery がデフォルトの CSS を復元する方法を説明します。

jqで元のCSSスタイルを復元する方法

test.html ファイルで、div タグを使用してモジュールを作成し、div の class 属性を testdiv に設定します。

css タグで、testdiv クラス名のスタイルを定義し、幅を 100px、高さを 120px、背景色を黄色に設定します。

jqで元のCSSスタイルを復元する方法

test.html ファイルで、button タグを使用して 2 つのボタンを作成します。1 つは「CSS の削除」と「CSS の復元」です。

jqで元のCSSスタイルを復元する方法

test.html ファイルで、onclick() クリック イベントを 2 つのボタン ボタンにそれぞれバインドします。ボタンがクリックされると、delcss() 関数と addcss がそれぞれ実行されます。()関数。

jqで元のCSSスタイルを復元する方法

js タグ内に、delcss() 関数と addcss() 関数をそれぞれ作成し、delcss() 関数内で class(testdiv) を通じて div オブジェクトを取得します。そして、removeAttr() メソッドを使用してクラスを削除して CSS スタイルを削除し、addcss() 関数で要素名から div オブジェクトを取得し、addClass() メソッドを使用して元のクラスを div オブジェクトに追加して復元します。デフォルトのCSS。

jqで元のCSSスタイルを復元する方法

test.html ファイルをブラウザで開き、ボタンをクリックして効果を確認します。

jqで元のCSSスタイルを復元する方法

jqで元のCSSスタイルを復元する方法

jqで元のCSSスタイルを復元する方法

[推奨学習:

JavaScript 上級チュートリアル]

以上がjqで元のCSSスタイルを復元する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!