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 を追加または削除して、マウスを横切ったときにリンク スタイルを変更する方法を使用することをお勧めします。