style.captionSideプロパティ

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

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

caption-sideプロパティは、表のタイトル（caption要素）の配置を指定することができる。

構文

取得

var $captionSide = $elementReference.style.captionSide;

戻り値

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

設定

$elementReference.style.captionSide = "top | bottom | left | right | inherit";
top | bottom | left | right | inherit
下記の何れかの値で指定する。初期設定値は「top」。
  • top：表の上に配置。
  • bottom：表の下に配置。
  • left：表の左に配置。
  • right：表の右に配置。
  • inherit：親要素の設定を継承。

サンプル


サンプルのcaption-sideプロパティの値：

キャプション要素
セルＡ１ セルＢ１ セルＣ１
セルＡ２ セルＢ２ セルＣ２
セルＡ３ セルＢ３ セルＣ３

サンプルの動作について

  • 「top」ボタンをクリックすると、「キャプション要素」を表の上に配置する。「サンプルのcaption-sideプロパティの値：」の右横に「top」と表示。
  • 「bottom」ボタンをクリックすると、「キャプション要素」を表の下に配置する。「サンプルのcaption-sideプロパティの値：」の右横に「bottom」と表示。
  • 「left」ボタンをクリックすると、「キャプション要素」を表の左に配置する。「サンプルのcaption-sideプロパティの値：」の右横に「left」と表示。
  • 「right」ボタンをクリックすると、「キャプション要素」を表の下に配置する。「サンプルのcaption-sideプロパティの値：」の右横に「right」と表示。
  • 「inherit」ボタンをクリックすると、親要素の設定を継承する。「サンプルのcaption-sideプロパティの値：」の右横に「inherit」と表示。

サンプルのソースコード

JavaScript

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

HTML

<button onclick="setCaptionSide('top');">top</button>
<button onclick="setCaptionSide('bottom');">bottom</button>
<button onclick="setCaptionSide('left');">left</button>
<button onclick="setCaptionSide('right');">right</button>
<button onclick="setCaptionSide('inherit');">inherit</button>
<br />
<p>サンプルのcaption-sideプロパティの値：<span id="sampleOutput"></span></p>
<table id="sampleTable">
 <caption id="sample">キャプション要素</caption>
 <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>
#sampleTable,
#sampleTable td {
 border: 1px solid red;
 background-color: yellow;
 padding: 6px 24px;
}
#sample {
 width: 150px;
 margin: 10px;
 padding: 6px 24px;
 border: 2px solid red;
 background-color: yellow;
 font-weight: bold;
}
#sampleTable {
 width: 400px;
 margin: 10px;
 padding: 0;
 border-spacing: 0px;
}
</style>

スポンサード リンク

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