style.backgroundColorは、要素のスタイル属性のbackground-colorプロパティの値を取得、もしくは、設定するプロパティ。
background-colorプロパティは、要素の背景色を指定することができる。
構文
取得
var $backgroundColor = $elementReference.style.backgroundColor;
戻り値
要素のスタイル属性のbackground-colorプロパティの値。
設定
$elementReference.style.backgroundColor = "color | transparent | inherit";
- color | transparent | inherit
- 背景色を指定する。
- 下記の何れかの方法で指定する。初期設定値は、「transparent」。
- カラーネーム：赤であれば
red。 - RGBカラーモデル：下記のような形式で指定できる。
- #RGB：赤であれば
#f00。 - #RRGGBB：赤であれば
#ff0000。 - rgb( 0～255, 0～255, 0～255 )：赤であれば
rgb( 255, 0, 0 )。 - rgb( 割合, 割合, 割合 )：赤であれば
rgb( 100%, 0%, 0% )。
- #RGB：赤であれば
- transparent：透明。
- inherit：親要素の「background-color」プロパティを継承。
- カラーネーム：赤であれば
サンプル
サンプルボックス要素
変更後のスタイルのbackground-colorプロパティの値：
サンプルの動作について
- 「設定（緑色）」ボタンをクリックすると、「サンプルボックス要素」の背景色を緑色に変更し、「変更後のスタイルのbackground-colorプロパティの値：」の右横に「green」と表示する。
- 「設定（黄色）」ボタンをクリックすると、「サンプルボックス要素」の背景色を黄色に変更し、「変更後のスタイルのbackground-colorプロパティの値：」の右横に「rgb(255, 255, 0)」と表示する。
- 「設定（赤色）」ボタンをクリックすると、「サンプルボックス要素」の背景色を赤色に変更し、「変更後のスタイルのbackground-colorプロパティの値：」の右横に「rgb(255, 0, 0)」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setBackground( $color ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundColor = $color;
var $backgroundColor = $elementReference.style.backgroundColor;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundColor;
}
</script>
function setBackground( $color ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.backgroundColor = $color;
var $backgroundColor = $elementReference.style.backgroundColor;
document.getElementById( "sampleOutput" ).innerHTML = $backgroundColor;
}
</script>
HTML
<div id="sample" style="background-color: red; margin: 10px 0; width: 300px; height: 150px;">サンプルボックス要素</div>
<button onclick="setBackground('green');">設定（緑色）</button>
<button onclick="setBackground('#ffff00');">設定（黄色）</button>
<button onclick="setBackground('rgb( 255, 0, 0 )');">設定（赤色）</button>
<p>変更後のスタイルのbackground-colorプロパティの値：<span id="sampleOutput"></span></p>
<button onclick="setBackground('green');">設定（緑色）</button>
<button onclick="setBackground('#ffff00');">設定（黄色）</button>
<button onclick="setBackground('rgb( 255, 0, 0 )');">設定（赤色）</button>
<p>変更後のスタイルのbackground-colorプロパティの値：<span id="sampleOutput"></span></p>