jQuery を使用して要素にスタイルを追加する

今日の投稿では、jQuery を使用して要素にスタイルを追加する方法について説明します。

.css() を使用して jQuery を使用して要素にスタイルを追加する

jQuery は、.css() を使用して要素にスタイルを追加し、一致する要素のセットに 1つ以上の CSS プロパティを設定する簡単な方法を提供します。 このアプローチでは、プロパティの名前と値を個別のパラメーターとして、またはキーと値のペアの単一のオブジェクトとして受け取ることができます。

構文：

.css(propertyName, value)

どこ：

• propertyName は、CSS プロパティ名を表す文字列です。
• value は、プロパティに設定する値を表す文字列または数値です。

jQuery は、複数単語のプロパティの CSS と DOM の書式設定を同等に解釈できます。 たとえば、jQuery は次の正しい値を認識します。

.css({'background-color': '#fefefe', 'border-right': '2px solid #eee'})

と

.css({backgroundColor: '#fefefe', borderRight: 'solid 2px #eee'})

DOM 表記では、プロパティ名の周りの引用符をオプションで使用できます。 CSS 表記では、名前内のハイフンのために必須です。 .css() はセッターとして使用されますが、jQuery は要素のスタイル プロパティを変更します。

スタイル プロパティの値を空の文字列に更新/設定すると、たとえば、$( "#div-1" ).css( "color", "" ) は、既に適用されている場合、要素からプロパティを削除します。 jQuery の .css() メソッドを介して HTML スタイル属性で直接、またはスタイル プロパティの直接 DOM 操作によって。

その結果、そのプロパティの要素のスタイルは、適用された値に戻ります。 したがって、このメソッドは、以前に行ったスタイルの変更をキャンセルできます。 さらに、.css() は重要な宣言をサポートしていません。

セッター .css() は、プロパティ名のプレフィックスを自動的に処理します。 .css() の .css() ドキュメントに関する詳細情報を見つけることができます。

次の例でそれを理解しましょう。

コード例 (HTML):

<div>Hello World!</div>

コード例 (JavaScript):

$('div').css({
  display: 'block',
  color: 'blue',
})

上記のコード例では、スタイリングを適用せずに div タグを記述しました。 jQuery を使用して、div の色を blue に、表示を block に設定しています。

jQuery をサポートするブラウザーで上記のコード スニペットを実行してみてください。 以下の結果が表示されます。

CSS プロパティを追加する前に、次の出力が得られます。

CSS プロパティを追加すると、次のようになります。

上記のコード例のライブ デモは こちら でご覧いただけます。