ホームページ > ウェブフロントエンド > jsチュートリアル > jQuery CSS() メソッドは既存の CSS style_jquery を変更します

jQuery CSS() メソッドは既存の CSS style_jquery を変更します

WBOY
リリース: 2016-05-16 16:39:01
オリジナル
1143 人が閲覧しました

JQuery 入門例: CSS() メソッドを使用して既存の CSS スタイル シートを変更します。 css() メソッドは多目的に使用できます。そのうちの 1 つは、カンマで区切られた 2 つの入力パラメータ (スタイル属性とスタイル値) を受け入れます。たとえば、リンクの色を変更するには、次のようなコードを書くことができます:

$("#61dh a").css('color','#123456'); 
//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接。 
//.css(‘color','#123456');表示把颜色设为'#123456'
ログイン後にコピー

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

var mycss = { 
background: '#EEE', 
width: '478px', 
margin: '10px 0 0', 
padding: '5px 10px', 
border: '1px solid #CCC' 
}; 
$("#result").css(divcss);
ログイン後にコピー

上記のコードは、まず CSS スタイル属性変数「mycss」を定義します。これは外部 CSS ファイルの作成に似ており、次に css() メソッドを通じて ID '#result' を持つ DIV に属性を割り当てます。

さらに、jQuery が提供する css() メソッドでも要素の css 属性値を表示できます。たとえば、リンクの色を表示するには、コードは次のとおりです:

$("#61dh a").css("color")
ログイン後にコピー

これは最初の例と似ていることがわかりますが、ここでは 1 つのパラメーター (style 属性) のみが渡されます。

最後に紹介するのは、マウスを横切った後のリンク スタイル (例: カラー) を設定する方法です。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()方法的两个函数使用用逗号分隔
ログイン後にコピー

賢明な方は、このメソッドが単純ではないことに気づいたかもしれません (笑)。実際、jQuery の hover() メソッドは CSS スタイルの変更に使用されません。実際のアプリケーションでは、CSS を追加または削除して、マウスを横切ったときにリンク スタイルを変更する方法を使用することをお勧めします。

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