style.borderColorプロパティ

style.borderColorは、要素のスタイル属性のborder-colorプロパティの値を取得、もしくは、設定するプロパティ。

border-colorプロパティは、要素の4辺の枠線の色を指定することができる。

構文

取得

var $borderColor = $elementReference.style.borderColor;

戻り値

要素のスタイル属性のborder-colorプロパティの値。

設定

$elementReference.style.borderColor = "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% )
  • transparent:透明。
  • inherit:親要素の枠線の色を継承。

サンプル

 サンプルボックス要素

変更後のborder-colorプロパティの値:

サンプルの動作について

  • 「設定(透明)」ボタンをクリックすると、「サンプルボックス要素」の枠線を透明にし、「変更後のborder-colorプロパティの値:」の右横に「transparent」と表示する。
  • 「設定(緑色)」ボタンをクリックすると、「サンプルボックス要素」の枠線を緑色にし、「変更後のborder-colorプロパティの値:」の右横に「green」と表示する。
  • 「設定(青色)」ボタンをクリックすると、「サンプルボックス要素」の枠線を青色にし、「変更後のborder-colorプロパティの値:」の右横に「rgb(0, 0, 255)」と表示する。
  • 「設定(赤色)」ボタンをクリックすると、「サンプルボックス要素」の枠線を赤色にし、「変更後のborder-colorプロパティの値:」の右横に「rgb(255, 0, 0)」と表示する。
  • 「設定(赤色と青色)」ボタンをクリックすると、「サンプルボックス要素」の上下の枠線を赤色、左右の枠線を青色にし、「変更後のborder-colorプロパティの値:」の右横に「red blue」と表示する。
  • 「設定(赤色、青色、緑色、紫色)」ボタンをクリックすると、「サンプルボックス要素」の上の枠線を赤色、右の枠線を青色、下の枠線を緑色、左の枠線を紫色にし、「変更後のborder-colorプロパティの値:」の右横に「red blue green purple」と表示する。
  • 「設定(継承)」ボタンをクリックすると、「サンプルボックス要素」の枠線の色を親要素から継承し、「変更後のborder-colorプロパティの値:」の右横に「inherit」と表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setBorderColor( $borderColor ) {
 var $elementReference = document.getElementById( "sample" );
 $elementReference.style.borderColor = $borderColor;
 var $borderColor = $elementReference.style.borderColor;
 document.getElementById( "sampleOutput" ).innerHTML = $borderColor;
}
</script>

HTML

<div id="sample" style="border: 5px solid red;background-color: yellow; margin: 10px 0; width: 300px; height: 200px;"> サンプルボックス要素</div>
<button onclick="setBorderColor('transparent');">設定(透明)</button>
<button onclick="setBorderColor('green');">設定(緑色)</button>
<button onclick="setBorderColor('#0000ff');">設定(青色)</button>
<button onclick="setBorderColor('rgb( 255, 0, 0 )');">設定(赤色)</button>
<br />
<button onclick="setBorderColor('red blue');">設定(赤色と青色)</button>
<button onclick="setBorderColor('red blue green purple');">設定(赤色、青色、緑色、紫色)</button>
<button onclick="setBorderColor('inherit');">設定(継承)</button>
<p>変更後のborder-colorプロパティの値:<span id="sampleOutput"></span></p>

スポンサード リンク

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