HTMLDOMスタイルのプロパティ

例

<h1>要素に赤い色を追加します。

document.getElementById("myH1").style.color = "red";

以下の「自分で試してみてください」の例をもっと見てください。

定義と使用法

styleプロパティは、要素のスタイル属性を表すCSSStyleDeclarationオブジェクトを返します。

styleプロパティは、さまざまなCSSプロパティを使用して要素の特定のスタイルを取得または設定するために使用されます。

注：スタイルプロパティに文字列を割り当ててスタイルを設定することはできません（例：element .style = "color：red;"）。要素のスタイルを設定するには、「CSS」プロパティを追加してスタイルを設定し、次のように値を指定します。

element.style.backgroundColor = "red"; // set the background color of an element to red

ご覧のとおり、CSSプロパティを設定するためのJavaScript構文は、CSSとは少し異なります（background-colorではなくbackgroundColor）。

使用可能なすべてのプロパティのリストについては、スタイルオブジェクトリファレンスを参照してください。

注： styleプロパティは、要素のインラインスタイル属性に設定されているCSS宣言のみを返します（例：
<p style = "color：red;">）。このプロパティを使用して、ドキュメントまたは外部スタイルシートの<head>セクションからスタイルルールに関する情報を取得することはできません。

ただし、document.getElementsByTagName（）を使用して、<head>から<style>要素にアクセスできます。

var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element

注： styleプロパティはstyle属性で指定されている他のCSSプロパティを上書きしないため、element .setAttribute（ "style"、 "..."）メソッドの代わりにstyleプロパティを使用することをお勧めします。

ブラウザのサポート

Property
style	Yes	Yes	Yes	Yes	Yes

構文

戻りスタイルのプロパティ：

element.style.property

スタイルプロパティを設定します。

element.style.property = value

プロパティ値

Value	Description
value	Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red";

技術的な詳細

戻り値：	要素のスタイル属性を表すCSSStyleDeclarationオブジェクト
DOMバージョン	Domレベル2CSS

その他の例

例

<p>要素のトップボーダーの値を取得します。

var x = document.getElementById("myP").style.borderTop;

JS Reference

JavaScript

Window

HTML DOM

Web APIs

HTML Objects

Other References