ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryは要素のクラススタイルを設定します

jqueryは要素のクラススタイルを設定します

无忌哥哥
リリース: 2018-06-29 13:48:11
オリジナル
1725 人が閲覧しました

jqueryは要素のクラススタイルを設定します

要素のスタイルを設定するメソッド

1. タグのclass属性を設定して適用するクラススタイルルールを指定します

2. タグのstyle属性を直接設定してスタイルを設定します現在の要素をリセットします

1. クラス スタイルを適用します: addClass()

$('#pic').addClass('circle')
$('#pic').addClass('circle shadow')
ログイン後にコピー
ログイン後にコピー

2. クラス スタイルを削除します:removeClass()

$('#pic').removeClass('circle')
$('#pic').removeClass('shadow')
$('#pic').removeClass('circle shadow')
ログイン後にコピー

3. 現在の要素にクラス スタイルが追加されていない場合: toogleClass()

, その後、自動的に指定されたクラス スタイルを追加します

$('#pic').toggleClass('circle shadow')
ログイン後にコピー
ログイン後にコピー

現在の要素がクラス スタイルで追加されている場合は、クラス スタイルを削除します

最初にクラス スタイルを要素に追加します

$('#pic').addClass('circle')
$('#pic').addClass('circle shadow')
ログイン後にコピー
ログイン後にコピー

ここで削除操作が実行されます

$('#pic').toggleClass('circle shadow')
ログイン後にコピー
ログイン後にコピー

4. クエリクラススタイル: hasClass()

var res = $('#pic').hasClass('circle shadow') //false
$('#pic').addClass('circle shadow') 
var res = $('#pic').hasClass('circle shadow') //true
if ($('#pic').hasClass('circle shadow')) {
$('#pic').removeClass('circle shadow')
} else {
$('#pic').addClass('circle shadow') 
}
ログイン後にコピー

// 結果をコンソールに表示します

console.log(res)
ログイン後にコピー

以上がjqueryは要素のクラススタイルを設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート