Terms Privacy

© Rollpie

JavaScript
21 Jan 2026

style プロパティで CSS を変更する

style プロパティを使うと、JavaScript から直接 CSS スタイルを変更できます。要素のインラインスタイルを操作するときに使います。

基本的な使い方

const element = document.getElementById('box');

// スタイルを設定
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';
element.style.fontSize = '20px';

CSS プロパティ名の変換

CSS のハイフン区切りは、JavaScript ではキャメルケースになります。

CSSJavaScript
background-colorbackgroundColor
font-sizefontSize
margin-topmarginTop
border-radiusborderRadius
z-indexzIndex

スタイルを取得する

const element = document.getElementById('box');

// インラインスタイルを取得
console.log(element.style.color);

// 注意：CSS ファイルで設定したスタイルは取得できない
// インラインスタイルのみ取得可能

CSS ファイルで設定されたスタイルを取得するには getComputedStyle を使います。

スタイルを削除する

空文字を設定するとスタイルが削除されます。

element.style.color = ''; // color スタイルを削除

実際に動かしてみよう

HTML
CSS
JavaScript
<div id="box">ボックス</div>
<button id="redBtn">赤くする</button>
<button id="blueBtn">青くする</button>
<button id="bigBtn">大きくする</button>
<button id="resetBtn">リセット</button>
#box {
  padding: 20px;
  background: #eee;
  transition: all 0.3s;
}
const box = document.getElementById('box');

document.getElementById('redBtn').addEventListener('click', () => {
  box.style.color = 'white';
  box.style.backgroundColor = 'red';
});

document.getElementById('blueBtn').addEventListener('click', () => {
  box.style.color = 'white';
  box.style.backgroundColor = 'blue';
});

document.getElementById('bigBtn').addEventListener('click', () => {
  box.style.fontSize = '24px';
  box.style.padding = '40px';
});

document.getElementById('resetBtn').addEventListener('click', () => {
  box.style.color = '';
  box.style.backgroundColor = '';
  box.style.fontSize = '';
  box.style.padding = '';
});

複数のスタイルを一度に設定

cssText を使うと、複数のスタイルを一度に設定できます。

element.style.cssText = 'color: red; font-size: 20px; margin: 10px;';

ただし、既存のインラインスタイルは上書きされます。

style vs classList

style プロパティ

動的に値を変えたいとき（アニメーション、ユーザー入力に応じた変更）

classList

定義済みのスタイルを切り替えたいとき。保守性が高い

基本的には CSS クラスを切り替える方法がおすすめです。style プロパティは、値を動的に計算する必要があるときに使いましょう。

// 推奨：クラスを切り替える
element.classList.add('active');

// style が必要なケース：動的な値
element.style.left = mouseX + 'px';
element.style.top = mouseY + 'px';
8 views