CSSStyleDeclaration オブジェクト：要素スタイルを操作する強力なツール
この文章では、CSSStyleDeclaration オブジェクトについて掘り下げ、JavaScript を使用して HTML 要素のスタイル属性を取得、設定、変更する方法を学びます。
1. CSSStyleDeclaration オブジェクトとは？
各 HTML 要素には style プロパティがあり、これは CSSStyleDeclaration オブジェクトを返します。
CSSStyleDeclaration オブジェクトには、インラインスタイル、埋め込みスタイル、外部スタイルシートのスタイルなど、その要素に適用されるすべてのスタイル情報が含まれています。
2. CSSStyleDeclaration オブジェクトの取得方法
element.style プロパティを使用します:
const elementStyle = element.style;特定の要素の CSSStyleDeclaration オブジェクトを取得する方法のコード例を以下に示します。
<div id="myDiv">この div のスタイルを変更します。</div>
<script>
const myDiv = document.getElementById("myDiv");
const divStyle = myDiv.style;
console.log(divStyle); // CSSStyleDeclaration オブジェクトを出力
</script>
3. 要素のスタイル属性の読み取り
-
style.propertyName構文を使用して、単一のスタイル属性値を取得します:const backgroundColor = element.style.backgroundColor; -
getPropertyValue()メソッドを使用すると、特にハイフンを含むプロパティに対して、より信頼性の高い結果が得られます:const fontSize = element.style.getPropertyValue('font-size');
2 つの方法の違いと使用シナリオを以下に説明します。
| 方法 | 説明 | 使用シナリオ |
|---|---|---|
style.propertyName |
シンプルで直感的な構文。ただし、ハイフンを含むプロパティ名はキャメルケースに変換する必要がある。 | 一般的なスタイルプロパティに簡単にアクセスする場合や、プロパティ名がハイフンを含まないことがわかっている場合に適している。 |
getPropertyValue() |
ハイフンを含むプロパティ名でも動作する、より信頼性の高い方法。 | プロパティ名がハイフンを含む場合や、プロパティ名が動的に生成される場合に適している。 |
4. 要素のスタイル属性の設定
-
style.propertyName = value構文を使用して、単一のスタイル属性値を設定します:element.style.color = 'red'; -
setProperty()メソッドを使用してスタイル属性を設定すると、重要度を同時に指定できます:element.style.setProperty('font-weight', 'bold', 'important');
要素のスタイルを動的に変更する方法を示すコード例を以下に示します。
<button id="myButton">ボタンをクリック</button>
<script>
const myButton = document.getElementById("myButton");
myButton.addEventListener('click', () => {
myButton.style.backgroundColor = 'blue';
myButton.style.color = 'white';
});
</script>
5. 要素のスタイル属性の削除
-
removeProperty()メソッドを使用して、指定されたスタイル属性を削除します:element.style.removeProperty('margin-top');
インラインスタイルをクリアして要素をデフォルトスタイルに戻す方法を説明します。
<p id="myParagraph" style="color: blue; font-size: 16px;">この段落のスタイルをリセットします。</p>
<button id="resetButton">リセット</button>
<script>
const myParagraph = document.getElementById("myParagraph");
const resetButton = document.getElementById("resetButton");
resetButton.addEventListener('click', () => {
myParagraph.style = ''; // インラインスタイルをクリア
});
</script>
6. CSSStyleDeclaration オブジェクトのプロパティとメソッド
-
cssText（すべてのスタイルの文字列を取得および設定する）、length（スタイル属性の数を取得する）など、よく使用されるプロパティをリストします。 -
item()、getPropertyPriority()などのよく使用されるメソッドを紹介します。
| プロパティ/メソッド | 説明 |
|---|---|
cssText |
要素のすべてのインラインスタイルを表す文字列を取得または設定します。 |
length |
style オブジェクト内のスタイルプロパティの数を返します。 |
item(index) |
指定されたインデックスにあるスタイルプロパティの名前を返します。 |
getPropertyValue(propertyName) |
指定されたプロパティの値を文字列として返します。 |
setProperty(propertyName, value, priority) |
指定されたプロパティの値を設定します。オプションで優先度（"important" など）を設定できます。 |
removeProperty(propertyName) |
指定されたプロパティとその値を削除します。 |
getPropertyPriority(propertyName) |
指定されたプロパティの優先度（"important" など）を返します。 |
7. 注意点
-
CSSStyleDeclarationオブジェクトには、現在の要素の計算されたスタイルのみが含まれており、擬似要素や擬似クラスのスタイルは含まれていません。 - 設定されていないスタイル属性にアクセスしようとすると、空の文字列が返されます。
- スタイル属性を変更する場合は、単位と値の有効性に注意する必要があります。
8. 実際のアプリケーションシナリオ
- JavaScript を使用して要素のスタイルを動的に変更し、インタラクティブな効果を実現します。
- アニメーション効果やレスポンシブレイアウトを作成します。
- デバッグなどの目的で、要素の計算されたスタイルを読み取ります。
まとめ
この記事では、CSSStyleDeclaration オブジェクトとその一般的なメソッドについて詳しく説明し、開発者が JavaScript を使用して HTML 要素のスタイル属性を操作し、より豊富な Web ページのインタラクション効果を実現する方法を理解するのに役立てました。
関連する QA
1. CSSStyleDeclaration オブジェクトを使用して、要素に複数のスタイルを一度に適用するにはどうすればよいですか？
element.style.cssText プロパティを使用すると、一度に複数のスタイルを適用できます。たとえば、以下のように記述します。
element.style.cssText = "color: blue; font-size: 16px; margin-top: 10px;";2. CSSStyleDeclaration オブジェクトを使用して、要素に適用されているすべてのスタイルを取得するにはどうすればよいですか？
getComputedStyle() メソッドを使用すると、要素に適用されているすべてのスタイルを取得できます。このメソッドは、インラインスタイル、埋め込みスタイル、外部スタイルシートのスタイルなど、すべてのスタイルを含む CSSStyleDeclaration オブジェクトを返します。
const computedStyle = window.getComputedStyle(element);3. JavaScript で CSS 変数を操作するにはどうすればよいですか？
getPropertyValue() メソッドと setProperty() メソッドを使用して、CSS 変数を操作できます。変数名には、"--" というプレフィックスを付ける必要があります。
// CSS 変数の値を取得する
const mainColor = getComputedStyle(element).getPropertyValue('--main-color');
// CSS 変数の値を設定する
element.style.setProperty('--main-color', 'blue');