style.borderプロパティ

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

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>

スポンサード リンク

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