style.borderは、要素のスタイル属性のborderプロパティの値を取得、もしくは、設定するプロパティ。
borderプロパティは、要素の枠線の幅とスタイルと色を一括指定することができる。
構文
取得
var $border = $elementReference.style.border;
戻り値
要素のスタイル属性のborderプロパティの値。
設定
$elementReference.style.border = "width style color";
- width
- 枠線の幅を指定。
- 下記の何れかの方法で指定する。初期設定値は、「medium」。
- thin：細い。
- medium：中くらい。
- thick：太い。
- length：絶対値。「px」や「pt」などの単位を付けた数値で指定。
- inherit：親要素の枠線の幅を継承。
- 詳しくは、style.borderWidthプロパティのページへ。
- style
- 枠線のスタイルを指定。
- 下記の何れかの方法で指定する。初期設定値は、「none」。
- none：枠線なし。
- hidden：枠線なし。
- dotted：点線の枠線。
- dashed：破線の枠線。
- solid：実線の枠線。
- double：二重線の枠線。
- groove：溝線の枠線。
- ridge：隆起線の枠線。
- inset：要素全体が窪んでいるように見える枠線。
- outset：要素全体が隆起しているように見える枠線。
- inherit：親要素の枠線のスタイルを継承。
- 詳しくは、style.borderStyleプロパティのページへ。
- color
- 枠線の色を指定。
- 下記の何れかの方法で指定する。初期設定値は、「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：親要素の枠線の色を継承。
- カラーネーム：赤であれば
- 詳しくは、style.borderColorプロパティのページへ。
サンプル
サンプルボックス要素
変更後のborderプロパティの値：
サンプルの動作について
- 「設定（なし）」ボタンをクリックすると、「サンプルボックス要素」の枠線をなくし、「変更後のborderプロパティの値：」の右横に「medium none」と表示する。
- 「設定（太い、二重線、赤色）」ボタンをクリックすると、「サンプルボックス要素」の枠線を赤色の太い二重線にし、「変更後のborderプロパティの値：」の右横に「thick double rgb(255, 0, 0)」と表示する。
- 「設定（細い、実線、青色）」ボタンをクリックすると、「サンプルボックス要素」の枠線を青色の細い点線にし、「変更後のborderプロパティの値：」の右横に「thin solid rgb(0, 0, 255)」と表示する。
- 「設定（10pxの幅、点線、緑色）」ボタンをクリックすると、「サンプルボックス要素」の枠線を緑色の10pxの幅の点線にし、「変更後のborderプロパティの値：」の右横に「10px dotted green」と表示する。
- 「設定（太い、窪む、赤色）」ボタンをクリックすると、「サンプルボックス要素」全体が窪んだように見える赤色の太い枠線にし、「変更後のborderプロパティの値：」の右横に「thick inset red」と表示する。
- 「設定（太い、隆起、赤色）」ボタンをクリックすると、「サンプルボックス要素」全体が隆起したように見える赤色の太い枠線にし、「変更後のborderプロパティの値：」の右横に「thick outset red」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setBorder( $border ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.border = $border;
var $border = $elementReference.style.border;
document.getElementById( "sampleOutput" ).innerHTML = $border;
}
</script>
function setBorder( $border ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.border = $border;
var $border = $elementReference.style.border;
document.getElementById( "sampleOutput" ).innerHTML = $border;
}
</script>
HTML
<div id="sample" style="border: 5px solid red;background-color: yellow; margin: 10px 0; width: 300px; height: 200px;"> サンプルボックス要素</div>
<button onclick="setBorder('none');">設定（なし）</button>
<br />
<button onclick="setBorder('thick double #ff0000');">設定（太い、二重線、赤色）</button>
<button onclick="setBorder('thin solid rgb( 0, 0, 255 )');">設定（細い、実線、青色）</button>
<button onclick="setBorder('10px dotted green');">設定（10pxの幅、点線、緑色）</button>
<br />
<button onclick="setBorder('thick inset red');">設定（太い、窪む、赤色）</button>
<button onclick="setBorder('thick outset red');">設定（太い、隆起、赤色）</button>
<p>変更後のborderプロパティの値：<span id="sampleOutput"></span></p>
<button onclick="setBorder('none');">設定（なし）</button>
<br />
<button onclick="setBorder('thick double #ff0000');">設定（太い、二重線、赤色）</button>
<button onclick="setBorder('thin solid rgb( 0, 0, 255 )');">設定（細い、実線、青色）</button>
<button onclick="setBorder('10px dotted green');">設定（10pxの幅、点線、緑色）</button>
<br />
<button onclick="setBorder('thick inset red');">設定（太い、窪む、赤色）</button>
<button onclick="setBorder('thick outset red');">設定（太い、隆起、赤色）</button>
<p>変更後のborderプロパティの値：<span id="sampleOutput"></span></p>