style.colorプロパティ

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% )
  • 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>

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>

スポンサード リンク

カテゴリー: DOM, JavaScript, Styleオブジェクト, テキスト, プロパティ, リファレンス パーマリンク