style.borderCollapseプロパティ

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

border-collapseプロパティは、表(テーブル)における隣り合う枠線(ボーダー)を重ねるか重ねないかを指定することができる。

構文

取得

var $borderCollapse = $elementReference.style.borderCollapse;

戻り値

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

設定

$elementReference.style.borderCollapse = "separate | collapse | inherit";
separate | collapse | inherit
下記の何れかの値で指定する。初期設定値は「collapse」。
  • collapse:表における隣り合う枠線を重ねる。
  • separate:表における隣り合う枠線を重ねない。
  • inherit:親要素の設定を継承。

サンプル


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

セルA1 セルB1 セルC1
セルA2 セルB2 セルC2
セルA3 セルB3 セルC3

サンプルの動作について

  • 「collapse」ボタンをクリックすると、表における隣り合う枠線を重ねる。「サンプルのborder-collapseプロパティの値:」の右横に「collapse」と表示。
  • 「separate」ボタンをクリックすると、表における隣り合う枠線を重ねない。「サンプルのborder-collapseプロパティの値:」の右横に「separate」と表示。
  • 「inherit」ボタンをクリックすると、親要素の設定を継承する。「サンプルのborder-collapseプロパティの値:」の右横に「inherit」と表示。

サンプルのソースコード

JavaScript

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

HTML

<button onclick="setBorderCollapse('collapse');">collapse</button>
<button onclick="setBorderCollapse('separate');">separate</button>
<button onclick="setBorderCollapse('inherit');">inherit</button>
<br />
<p>サンプルのborder-collapseプロパティの値:<span id="sampleOutput"></span></p>
<table id="sample">
 <tr>
  <td>セルA1</td>
  <td>セルB1</td>
  <td>セルC1</td>
 </tr>
 <tr>
  <td>セルA2</td>
  <td>セルB2</td>
  <td>セルC2</td>
 </tr>
 <tr>
  <td>セルA3</td>
  <td>セルB3</td>
  <td>セルC3</td>
 </tr>
</table>

CSS

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

スポンサード リンク

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