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 ではキャメルケースになります。
| CSS | JavaScript |
|---|---|
| background-color | backgroundColor |
| font-size | fontSize |
| margin-top | marginTop |
| border-radius | borderRadius |
| z-index | zIndex |
スタイルを取得する
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';
22views
