JavaScript style プロパティ一覧

JavaScript style プロパティ一覧: 要素のスタイルを自在に操る

JavaScript style プロパティ一覧: 要素のスタイルを自在に操る

この記事では、JavaScript の style オブジェクトを使用して、HTML 要素のスタイルを動的に変更する方法を解説します。スタイルプロパティの一覧、値の設定方法、注意点などを詳しく説明し、実用的なコード例も交えて分かりやすく解説します。

目次

  1. はじめに：style オブジェクトとは
  2. style プロパティ一覧
  3. style オブジェクトを使用する際の注意点
  4. 実用的なコード例
  5. まとめ

1. はじめに：style オブジェクトとは

style オブジェクトは、HTML 要素のスタイルにアクセスし、変更するためのインターフェースを提供します。element.style で要素の style オブジェクトを取得できます。

2. style プロパティ一覧

以下は、代表的な style プロパティの一部です。詳細な一覧は、MDN Web Docs を参照してください。

プロパティ名 説明 値の型 設定例
color テキストの色を設定 文字列 element.style.color = "red";
backgroundColor 背景色を設定 文字列 element.style.backgroundColor = "#f0f0f0";
width 幅を設定 文字列 element.style.width = "200px";
height 高さを設定 文字列 element.style.height = "100px";
fontSize フォントサイズを設定 文字列 element.style.fontSize = "16px";
textAlign テキストの水平方向の配置を設定 文字列 element.style.textAlign = "center";
display 要素の表示形式を設定 文字列 element.style.display = "none";
position 要素の配置を設定 文字列 element.style.position = "absolute";
top 要素の上端の位置を設定 文字列 element.style.top = "50px";
left 要素の左端の位置を設定 文字列 element.style.left = "50px";

3. style オブジェクトを使用する際の注意点

  • JavaScript では、CSS のプロパティ名はキャメルケースで記述します (background-color → backgroundColor)。
  • 値には単位を付ける必要があります (200px, 1.5em など)。
  • style オブジェクトは、インラインスタイルのみにアクセスできます。外部スタイルシートや <style> タグ内のスタイルは取得できません。
  • getComputedStyle() メソッドを使用すると、計算済みのスタイルを取得できます。詳細はこちら: MDN Web Docs

4. 実用的なコード例

ボタンクリックで要素の色を変更する

<button id="changeColorButton">色を変更</button>
<p id="targetText">このテキストの色が変わります</p>

<script>
const button = document.getElementById('changeColorButton');
const targetText = document.getElementById('targetText');

button.addEventListener('click', () => {
  targetText.style.color = 'blue';
});
</script>

マウスオーバーで要素のサイズを変更する

<div id="resizableBox" style="width: 100px; height: 100px; background-color: lightblue;"></div>

<script>
const resizableBox = document.getElementById('resizableBox');

resizableBox.addEventListener('mouseover', () => {
  resizableBox.style.width = '200px';
  resizableBox.style.height = '200px';
});

resizableBox.addEventListener('mouseout', () => {
  resizableBox.style.width = '100px';
  resizableBox.style.height = '100px';
});
</script>

5. まとめ

style オブジェクトは、HTML 要素のスタイルを動的に変更するための強力なツールです。この記事で紹介したプロパティや注意点、コード例を参考に、JavaScript を使ったインタラクティブなWebページを作成してみてください。

関連QA

  1. Q: style オブジェクトで設定したスタイルは、ページのリロード後も保持されますか？
    A: いいえ、保持されません。style オブジェクトで設定したスタイルは、あくまで現在のページの表示にのみ影響します。ページをリロードすると、初期状態に戻ります。永続的にスタイルを保存したい場合は、localStorage などを使用する必要があります。
  2. Q: style オブジェクトで、複数のスタイルプロパティを同時に設定することはできますか？
    A: はい、可能です。ただし、一度に一つのプロパティしか設定できません。例えば、以下のように、複数のプロパティを順番に設定する必要があります。 
    
element.style.width = '200px';
element.style.height = '100px';
element.style.backgroundColor = 'lightblue';
  3. Q: !important を使用して、style オブジェクトで設定したスタイルの優先度を上げることはできますか？
    A: いいえ、できません。style オブジェクトで設定されるスタイルは、インラインスタイルとして扱われます。インラインスタイルは、!important を使用しなくても、他のスタイルよりも優先度が高いためです。

その他の参考記事:jquery removeattr style