例
赤い色を追加し<h1>要素：
document.getElementById("myH1").style.color = "red"; スタイルを設定する前に：
Hello World!
スタイルを設定した後：
Hello World!
»それを自分で試してみてください もっと"Try it Yourself"以下の例。
定義と使用法
スタイルプロパティは、要素のスタイル属性を表しCSSStyleDeclarationオブジェクトを返します。
スタイルプロパティは別のCSSプロパティを使用して、要素の特定のスタイルを取得または設定するために使用されます。
注意：スタイルプロパティに文字列を割り当てることでスタイルを設定することはできません、例えば要素 .style = "color: red;" 。 要素のスタイルを設定するには、追加"CSS"スタイルにプロパティをし、このように、値を指定します。
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
あなたが見ることができるように、CSSプロパティを設定するためのJavaScriptの構文はCSSよりもわずかに異なっている(backgroundColor instead of background-color) 。
使用可能なすべてのプロパティのリストについては、当社の参照スタイルのオブジェクト参照を 。
注意：スタイルプロパティは、要素のインラインスタイル属性に設定CSS宣言を返し、例えば
<Pスタイル= "色：赤;">。 からのスタイルのルールについての情報を取得するために、このプロパティを使用することはできません<head>文書や外部スタイルシート内のセクションを。
ただし、アクセスできる<style>から要素を<head>文書を使用することによって。 getElementsByTagName()
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
注意：代わりにスタイルプロパティを使用することをお勧めしますelement 。 setAttribute("style", "...")メソッド、スタイルプロパティで指定することができる他のCSSプロパティは上書きされませんので、 style属性を。
ブラウザのサポート
| プロパティ | |||||
|---|---|---|---|---|---|
| style | はい | はい | はい | はい | はい |
構文
スタイルプロパティを返します：
element .style. property 設定するスタイルプロパティ：
element .style. property = value プロパティ値
| 値 | 説明 |
|---|---|
| value | 指定されたプロパティの値を指定します。 例えば、borderBottomプロパティの： 要素 .style.borderBottom =「2ピクセル固体赤」; |
技術的な詳細
| 戻り値： | 要素のstyle属性を表すCSSStyleDeclarationオブジェクト、 |
|---|---|
| DOMバージョン | DOM Level 2のCSS |
その他の例
例
値を取得<p>要素のトップボーダーを：
var x = document.getElementById("myP").style.borderTop;xの結果は次のようになります。
5px solid red »それを自分で試してみてください 関連ページ
CSSチュートリアル： CSSチュートリアル
CSSリファレンス： CSSプロパティ
HTML DOMリファレンス： スタイルのオブジェクト参照
HTMLリファレンス： HTML <style>タグ
<Elementオブジェクト