style.borderSpacingプロパティ

投稿日: 2013年11月13日 作成者: alphasis

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

border-spacingプロパティは、表（テーブル）における隣り合うセルの枠線（ボーダー）の間隔を指定することができる。

border-spacingプロパティを使うには、style.borderCollapseプロパティに「separate」を指定しておかなければならない。

構文

取得

var $borderSpacing = $elementReference.style.borderSpacing;

戻り値

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

設定

初期設定値は「0」。

上下左右一括指定

$elementReference.style.borderSpacing = "length";
length
上下左右の間隔。
「px」や「em」などの単位を付けた数値で指定。

左右と上下を別々に指定

$elementReference.style.borderSpacing = "lengthA lengthB";
lengthA
左右の間隔。
「px」や「em」などの単位を付けた数値で指定。
lengthB
上下の間隔。
「px」や「em」などの単位を付けた数値で指定。

継承

親要素の設定を継承する。

$elementReference.style.borderSpacing = "inherit";

サンプル

border-spacing：
サンプルのborder-spacingプロパティの値：

border-collapse：
サンプルのborder-collapseプロパティの値：

セルＡ１ セルＢ１ セルＣ１
セルＡ２ セルＢ２ セルＣ２
セルＡ３ セルＢ３ セルＣ３

サンプルの動作について

  • 「border-spacing：」の右横のボタンをクリックすると、ボタン名のテキストを、サンプルの表の「border-spacingプロパティ」の値に設定する。設定値を「サンプルのborder-spacingプロパティの値：」の右横に表示する。
  • 「border-collapse：」の右横のボタンをクリックすると、ボタン名のテキストを、サンプルの表の「border-collapseプロパティ」の値に設定する。設定値を「サンプルのborder-collapseプロパティの値：」の右横に表示する。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setBorderSpacing( $borderSpacing ) {
 var $element = document.getElementById( "sample" );
 $element.style.borderSpacing = $borderSpacing;
 var $borderSpacing = $element.style.borderSpacing;
 document.getElementById( "sampleOutputA" ).innerHTML = $borderSpacing;
}
function setBorderCollapse( $borderCollapse ) {
 var $element = document.getElementById( "sample" );
 $element.style.borderCollapse = $borderCollapse;
 var $borderCollapse = $element.style.borderCollapse;
 document.getElementById( "sampleOutputB" ).innerHTML = $borderCollapse;
}
</script>

HTML

<p>
 border-spacing：
 <button onclick="setBorderSpacing('0');">0</button>
 <button onclick="setBorderSpacing('10px');">10px</button>
 <button onclick="setBorderSpacing('10pt');">10pt</button>
 <button onclick="setBorderSpacing('1em');">1em</button>
 <button onclick="setBorderSpacing('10px 20px');">10px 20px</button>
 <button onclick="setBorderSpacing('20px 10px');">20px 10px</button>
 <button onclick="setBorderSpacing('inherit');">inherit</button>
 <br />
 サンプルのborder-spacingプロパティの値：<span id="sampleOutputA"></span>
</p>
<p>
 border-collapse：
 <button onclick="setBorderCollapse('collapse');">collapse</button>
 <button onclick="setBorderCollapse('separate');">separate</button>
 <button onclick="setBorderCollapse('inherit');">inherit</button>
 <br />
 サンプルのborder-collapseプロパティの値：<span id="sampleOutputB"></span>
</p>
<table id="sample">
 <tr>
  <td>セルＡ１</td>
  <td>セルＢ１</td>
  <td>セルＣ１</td>
 </tr>
 <tr>
  <td>セルＡ２</td>
  <td>セルＢ２</td>
  <td>セルＣ２</td>
 </tr>
 <tr>
  <td>セルＡ３</td>
  <td>セルＢ３</td>
  <td>セルＣ３</td>
 </tr>
</table>

CSS

<style>
#sample,
#sample td {
 border: 2px solid red;
 background-color: yellow;
}
#sample {
 width: 500px;
 margin: 10px;
 padding: 0;
 border-collapse: separate;
 border-spacing: 0px;
}
</style>

スポンサード リンク

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