JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでHTML要素のCSSスタイルを動的に変更する方法をわかりやすく解説

JavaScriptで要素のCSSスタイルを変更する基本

JavaScriptを使えば、HTML要素に適用されているCSSスタイル（文字色、フォントサイズ、フォントスタイルなど）を動的に変更できます。要素を取得するには、getElementById()やgetElementsByClassName()といったメソッドを使用します。

取得した要素に対して「style」プロパティ経由でスタイル名を指定するだけで、ボタンのクリックなどをきっかけに、ページの見た目をリアルタイムに変化させることが可能です。

以下では、getElementById()メソッドを使って、要素のフォントスタイルやフォントサイズを変更する具体的な例を紹介します。

例1：フォントサイズとフォントスタイルの変更

次の例では、styleコマンドの「style.fontSize」と「style.fontStyle」を使って、表示中のテキストのフォントサイズを「35px」に、フォントスタイルを「イタリック（斜体）」に変更しています。

<html>
<body>
   <p id="size">JavaScriptはHTML要素のスタイルを変更できます。</p>
   <p id="style">JavaScriptはHTML要素のスタイルを変更できます。</p>
   <button type="button"
   onclick="document.getElementById('size').style.fontSize='35px'">Size</button>
   <button type="button" onclick="document.getElementById('style')
.style.fontStyle='italic'">Style</button>
</body>
</html>

上記のコードを実行すると、ブラウザには次のように表示されます。

JavaScriptでHTML要素のCSSスタイルを動的に変更する方法をわかりやすく解説

それぞれのボタンをクリックすると、1つ目のテキストはフォントサイズが、2つ目のテキストはフォントスタイルが、出力結果のように変化します。

出力結果

JavaScriptでHTML要素のCSSスタイルを動的に変更する方法をわかりやすく解説

例2：テキストの色を変更する

続いて、styleコマンドの「style.color」を使用して、テキストの色を青（blue）に変更する例を見てみましょう。

<html>
<body>
   <p id="color">JavaScriptはHTML要素の色を変更できます。</p>
   <button type="button" onclick="document.getElementById('color').
   style.color='blue'">Color Me</button>
</body>
</html>

上記のコードを実行すると、ブラウザウィンドウには次のように表示されます。

JavaScriptでHTML要素のCSSスタイルを動的に変更する方法をわかりやすく解説

「Color Me」ボタンをクリックすると、指定したテキストの色が「青」に変わります。

出力結果

JavaScriptでHTML要素のCSSスタイルを動的に変更する方法をわかりやすく解説

まとめ

このように、JavaScriptでは「getElementById()」で対象の要素を取得し、「style.プロパティ名 = 値」という形式を記述するだけで、CSSスタイルを簡単に動的に変更できます。フォントサイズやフォントスタイル、文字色以外にも、背景色や余白（margin・padding）など、さまざまなスタイルプロパティが同じ方法で操作できるので、ぜひ実際にコードを書いて試してみてください。

  1. CSSでテキストボックスのプレースホルダーの色を変更する方法

    Webフォームの入力欄に表示されるプレースホルダー(仮置きテキスト)の色は、CSSの ::placeholder 疑似要素を使うことで自由に変更できます。デフォルトのグレー表示から、サイトのデザインに合わせた色へとカスタマイズすることで、フォームの見栄えやユーザビリティを向上させることができます。::placeholder疑似要素の基本構文::placeholder 疑似要素の書き方は以下のとおりです。::placeholder { 属性: 値; }例1:特定の入力欄だけプレースホルダーの色を変える次の例では、:last-child セレクタと組み合わせることで、2つ目のinput要素の

  2. HTMLでリンクの色を変更するにはどうすればよいですか？

    HTMLでリンクの色を変更する基本HTMLでリンクの色を変更するには、CSSの「color」プロパティを使用します。具体的には、style属性と組み合わせて指定します。style属性は、個々の要素に対してインラインスタイルを適用するための属性です。リンク（<a>タグ）にstyle属性を追加し、そこへcolorプロパティを記述することで、リンクの色を自由に変更できます。ただし、1点注意が必要です。style属性によるインラインスタイルは最も優先度が高いため、<style>タグや外部スタイルシートで設定されたスタイルは上書きされてしまいます。コード例以下のコードを実行すると