style.borderColorは、要素のスタイル属性のborder-colorプロパティの値を取得、もしくは、設定するプロパティ。
border-colorプロパティは、要素の４辺の枠線の色を指定することができる。
構文
取得
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% )。
- #RGB：赤であれば
- 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>
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>
<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>