JavaScript の Style オブジェクトと CurrentStyle オブジェクト

JavaScriptでは、StyleオブジェクトとCurrentStyleオブジェクトを使用して、HTML要素のスタイルプロパティを取得および設定できます。

Styleオブジェクトとは、DOM内の要素が持つプロパティのひとつで、要素のインラインスタイル属性を保持しています。このStyleオブジェクトを介すことで、要素のスタイル属性を直接読み込んだり設定したりできます。

例えば、要素の背景色プロパティを取得するには、以下のコードを使用できます。

var element = document.getElementById("myElement");
var backgroundColor = element.style.backgroundColor;

要素の背景色のプロパティを設定するには、以下のコードを使用できます。

element.style.backgroundColor = "red";

インラインスタイルプロパティのみ取得または設定できます。外部スタイルシートや埋め込みスタイルシートで定義されたスタイルは取得または設定できません。

なお、Internet Explorerでは、要素の計算済みスタイルプロパティを取得するためにCurrentStyleオブジェクトを使用できます。CurrentStyleオブジェクトはInternet Explorer特有のオブジェクトであり、内線で定義されたスタイル、外部スタイルシート、およびインラインスタイルシートで定義されたスタイルを含む、要素の最終的な計算済みスタイルを返します。

例えば、幅の属性を取得するには、次のコードを使用します。

var element = document.getElementById("myElement");
var width = element.currentStyle.width;

CurrentStyleオブジェクトはIEのみで利用でき、それ以外のブラウザでは無効なので注意してください。それ以外のブラウザではgetComputedStyleメソッドを利用して要素の計算されたスタイルを取得できます。

Styleオブジェクトは要素のインラインスタイル属性を取得・設定し、CurrentStyleオブジェクトはIEブラウザにおいて要素の計算されたスタイルプロパティを取得するために使われる。