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