style

スタイル（DOM操作）

意味インラインスタイル変更

styleとは？

DOM要素の`style`属性を直接操作するためのプロパティ。CSSのプロパティ名をキャメルケースにした形でJavaScriptからスタイルを取得・設定することができる。

styleの具体的な使い方

インラインスタイルを変更する例

<button onclick='changeElementStyle()'>スタイルを変更</button>
<div id='myElement' style='padding: 10px; border: 1px solid black;'>このボックスのスタイルを変更します</div>

<script>
let isStyleChanged = false;

function changeElementStyle() {
  const element = document.getElementById('myElement');
  if (!isStyleChanged) {
    element.style.backgroundColor = 'lightblue';
    element.style.color = 'darkblue';
    element.style.fontWeight = 'bold';
    element.style.borderRadius = '5px';
    element.textContent = 'スタイルが変更されました';
    isStyleChanged = true;
  } else {
    element.style.backgroundColor = '';
    element.style.color = '';
    element.style.fontWeight = '';
    element.style.borderRadius = '';
    element.textContent = 'このボックスのスタイルを変更します';
    isStyleChanged = false;
  }
  
  console.log('現在のスタイル:', element.style.cssText);
}
</script>

ボタンをクリックすると、'myElement'のインラインスタイルが変更されます。背景色、テキスト色、フォントの太さ、境界線の丸みが切り替わります。また、コンソールに現在のスタイル情報が表示されます。

cssTextを使用して複数のスタイルを設定する例

const element = document.createElement('div');
element.textContent = 'cssTextでスタイル設定';
element.style.cssText = 'color: blue; font-size: 16px; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc;';
console.log('設定されたスタイル:', element.style.cssText);
document.body.appendChild(element);

👇出力結果

設定されたスタイル: color: blue; font-size: 16px; padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc;

新しい<div>要素を作成し、cssTextプロパティを使用して複数のスタイルを一度に設定します。設定されたスタイルをコンソールに出力し、要素をドキュメントに追加します。

styleに関するよくある質問

Q. CSSプロパティ名の違いは？

A. JavaScriptでstyleを使用する際、CSSのプロパティ名はキャメルケースに変換されます。例えば、'background-color'は'backgroundColor'となります。

Q. styleとsetAttribute()の違いは？

A. styleプロパティは個別のスタイルプロパティにアクセスできますが、setAttribute('style', ...)はstyle属性全体を文字列として設定します。styleの方がより細かい制御が可能です。

Q. 外部CSSのスタイルは取得できる？

A. いいえ、element.styleは要素のインラインスタイルのみを扱います。外部CSSや<style>タグで定義されたスタイルを取得するには、getComputedStyle()メソッドを使用する必要があります。

styleが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのstyleやclassList.remove()、NodeList、Element、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。