style.emptyCellsプロパティ

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

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

empty-cellsプロパティは、表（テーブル）における空白セルの枠線を表示するかしないかを指定することができる。

構文

取得

var $emptyCells = $elementReference.style.emptyCells;

戻り値

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

設定

$elementReference.style.emptyCells = "show | hide | inherit";
show | hide | inherit
下記の何れかの値で指定する。初期設定値は「show」。
  • show：空白セルの枠線を表示。
  • hide：空白セルの枠線を非表示。
  • inherit：親要素の設定を継承。

サンプル


サンプルのempty-cellsプロパティの値：

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

サンプルの動作について

  • 「show」ボタンをクリックすると、空白セルの枠線を表示する。「サンプルのempty-cellsプロパティの値：」の右横に「show」と表示。
  • 「hide」ボタンをクリックすると、空白セルの枠線を表示しない。「サンプルのempty-cellsプロパティの値：」の右横に「hide」と表示。
  • 「inherit」ボタンをクリックすると、親要素の設定を継承する。「サンプルのempty-cellsプロパティの値：」の右横に「inherit」と表示。

サンプルのソースコード

JavaScript

<script type="text/javascript">
function setEmptyCells( $emptyCells ) {
 var $elements = document.getElementById( "sample" ).getElementsByTagName( "td" );
 for( $i=0; $i < $elements.length; $i++ ){
  $elements[$i].style.emptyCells = $emptyCells;
 }
 var $emptyCells = $elements[0].style.emptyCells;
 document.getElementById( "sampleOutput" ).innerHTML = $emptyCells;
}
</script>

HTML

<button onclick="setEmptyCells('show');">show</button>
<button onclick="setEmptyCells('hide');">hide</button>
<button onclick="setEmptyCells('inherit');">inherit</button>
<br />
<p>サンプルのempty-cellsプロパティの値：<span id="sampleOutput"></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;
 padding: 6px 24px;
}
#sample {
 width: 500px;
 margin: 10px;
 padding: 0;
 border-collapse: separate;
 border-spacing: 10px;
}
</style>

スポンサード リンク

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