ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery は CSS style_jquery の基本コードを変更します

jQuery は CSS style_jquery の基本コードを変更します

WBOY
リリース: 2016-05-16 18:34:47
オリジナル
1071 人が閲覧しました

そのうちの 1 つは、カンマで区切られた 2 つの入力パラメータ (スタイル属性とスタイル値) を受け入れます。たとえば、リンクの色を変更したい場合は、次のコードを使用できます:

コードをコピー コードは次のとおりです。

$("#61dh a").css('color','#123456');
//ここにセレクター '$("#61dh a")' ID '#61dh' の要素を表します。すべてのリンクは以下にあります。
//.css('color','#123456'); 色を '#123456' に設定することを意味します

複数のスタイル属性を変更する必要がある場合は、属性を定義できます最初の変数を取得し、それを css() メソッドに直接割り当てます。例は次のとおりです。
コードをコピー コードは次のとおりです。

var divcss = {
背景: '#EEE'、
幅: '478px'、
マージン: '10px 0 0'、
パディング: '5px 10px'、
ボーダー: '1px ソリッド # CCC'
} ;
$("#result").css(divcss); //ここでは、最初に CSS スタイル属性変数 'divcss' を定義します。これは、外部 CSS ファイルの作成と同様です。 。
//次に、jQuery が提供する css() メソッドを使用して、ID '#result' を持つ DIV に属性を割り当てます。

また、jQuery が提供する css() メソッドを使用して、要素の css 属性値を表示することもできます。たとえば、リンクの色を確認したい場合は、次のコードを使用できます。

$("#61dh a").css("color")
//最初の例と似ていますが、ここではパラメーター (style 属性) を 1 つだけ渡します。

最後に紹介するのは、マウスを横切った後のリンク スタイル (例: カラー) を設定する方法です。マウスオーバー状態ではセレクターを使用してリンクを直接選択することはできません。これは、$("a:hover") が無効であることを意味します。したがって、jQuery が提供するイベント クラス メソッドである hover() を使用する必要があります。 hover() メソッドは 2 つの関数を定義する必要があることに注意してください。1 つはマウスが上に移動したとき、もう 1 つはマウスが上に移動した後です。具体的な方法は次のとおりです。

コードをコピーします コードは次のとおりです:
$ ("#61dh a") .css('color','#123456');
$("#61dh a").hover(function(){
$(this).css('color ','#999') ;
},
function(){
$(this).css('color','#123456'); /hover() メソッドの 2 つの方法 関数はカンマで区切られます


このメソッドは (jQuery の目的に反して) まったく簡潔ではないことに気づくかもしれませんが、
実際には、hover jQuery が提供する () メソッドは CSS スタイルの変更には使用されません。実際のアプリケーションでは、CSS を追加または削除して、マウスを横切ったときにリンク スタイルを変更する方法を使用することをお勧めします。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート