style.borderBottomWidthプロパティ

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

border-bottom-widthプロパティは、要素の下の枠線の幅を指定することができる。

構文

取得

var $borderBottomWidth = $elementReference.style.borderBottomWidth;

戻り値

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

設定

$elementReference.style.borderBottomWidth = "thin | medium | thick | length | inherit";
thin | medium | thick | length | inherit
枠線の幅を指定。
下記の何れかの方法で指定する。初期設定値は、「medium」。
  • thin:細い。
  • medium:中くらい。
  • thick:太い。
  • length:絶対値。「px」や「pt」などの単位を付けた数値で指定。
  • inherit:親要素の下の枠線の幅を継承。

サンプル

 サンプルボックス要素

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

サンプルの動作について

  • 「設定(細い)」ボタンをクリックすると、「サンプルボックス要素」の下の枠線を細い線にし、「変更後のborder-bottom-widthプロパティの値:」の右横に「thin」と表示する。
  • 「設定(中くらい)」ボタンをクリックすると、「サンプルボックス要素」の下の枠線を中くらいの太さの線にし、「変更後のborder-bottom-widthプロパティの値:」の右横に「medium」と表示する。
  • 「設定(太い)」ボタンをクリックすると、「サンプルボックス要素」の下の枠線を太い線にし、「変更後のborder-bottom-widthプロパティの値:」の右横に「thick」と表示する。
  • 「設定(1px)」ボタンをクリックすると、「サンプルボックス要素」の下の枠線の幅を1pxにし、「変更後のborder-bottom-widthプロパティの値:」の右横に「1px」と表示する。
  • 「設定(1em)」ボタンをクリックすると、「サンプルボックス要素」の下の枠線の幅を1emにし、「変更後のborder-bottom-widthプロパティの値:」の右横に「1em」と表示する。
  • 「設定(継承)」ボタンをクリックすると、「サンプルボックス要素」の下の枠線の幅を親要素から継承し、「変更後のborder-bottom-widthプロパティの値:」の右横に「inherit」と表示する。

サンプルのソースコード

JavaScript

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

HTML

<div id="sample" style="border: 5px solid red;background-color: yellow; margin: 10px 0; width: 300px; height: 200px;"> サンプルボックス要素</div>
<button onclick="setBorderBottomWidth('thin');">設定(細い)</button>
<button onclick="setBorderBottomWidth('medium');">設定(中くらい)</button>
<button onclick="setBorderBottomWidth('thick');">設定(太い)</button>
<button onclick="setBorderBottomWidth('1px');">設定(1px)</button>
<button onclick="setBorderBottomWidth('1em');">設定(1em)</button>
<button onclick="setBorderBottomWidth('inherit');">設定(継承)</button>
<p>変更後のborder-bottom-widthプロパティの値:<span id="sampleOutput"></span></p>

スポンサード リンク

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