jQueryを使用してインラインスタイルを追加する方法


まず、jQueryを使用するために、jQueryライブラリをHTMLページに追加します。以下のコードは、CDN経由でjQueryを読み込む例です。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

次に、インラインスタイルを追加したい要素を特定します。一般的な方法は、要素のIDやクラスを使用して要素を選択することです。以下の例では、IDが"myElement"の要素を選択しています。

<div id="myElement">これはテキストです。</div>

選択した要素に対して、css()関数を使用してスタイルを追加します。以下のコードは、選択した要素に背景色とフォントサイズのスタイルを追加する例です。

$("#myElement").css({
  "background-color": "red",
  "font-size": "16px"
});

上記の例では、css()関数にオブジェクトを渡しています。オブジェクトのプロパティはスタイルのプロパティ名(キャメルケースまたはハイフン区切り)であり、値は適用したいスタイルの値です。

これで、要素にインラインスタイルが追加されました。ページを表示すると、要素は赤い背景色で表示され、フォントサイズも16ピクセルになります。

以上が、jQueryを使用してインラインスタイルを追加する方法の簡単な例です。さまざまな要素やスタイルに適用することができますので、必要に応じてカスタマイズしてください。