style.visibilityは、要素のスタイル属性のvisibilityプロパティの値を取得、もしくは、設定するプロパティ。
visibilityプロパティは、要素の表示・非表示や、表の行や列の詰める詰めないを指定することができる。
構文
取得
var $visibility = $elementReference.style.visibility;
戻り値
要素のスタイル属性のvisibilityプロパティの値。
設定
$elementReference.style.visibility = "value";
- value
- 下記の何れかの値を指定する。初期設定値は「visible」。
- visible：表示。
- hidden：非表示。
- collapse：表の行や列を詰める。
- inherit：親要素の設定を継承。
サンプル
テーブルのvisibilityプロパティの値：
真ん中の列のvisibilityプロパティの値：
| １－１ | １－２ | １－３ |
| ２－１ | ２－２ | ２－３ |
| ３－１ | ３－２ | ３－３ |
サンプルの動作について
- 「テーブルを表示」ボタンをクリックすると、テーブルを表示する。「テーブルのvisibilityプロパティの値：」の右横に「visible」と表示する。
- 「テーブルを非表示」ボタンをクリックすると、テーブルを非表示にする。「テーブルのvisibilityプロパティの値：」の右横に「hidden」と表示する。
- 「真ん中の列を詰める」ボタンをクリックすると、真ん中の列を詰め、非表示にする。「真ん中の列のvisibilityプロパティの値：」の右横に「collapse」と表示する。
- 「真ん中の列を詰めない」ボタンをクリックすると、真ん中の列を詰めずに表示する。「真ん中の列のvisibilityプロパティの値：」の右横に「visible」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setVisibility( $visibility, $id ) {
var $element = document.getElementById( $id );
$element.style.visibility = $visibility;
var $visibility = $element.style.visibility;
if( $id == "sample1" ){
document.getElementById( "sampleOutput1" ).innerHTML = $visibility;
}else{
document.getElementById( "sampleOutput2" ).innerHTML = $visibility;
}
}
</script>
function setVisibility( $visibility, $id ) {
var $element = document.getElementById( $id );
$element.style.visibility = $visibility;
var $visibility = $element.style.visibility;
if( $id == "sample1" ){
document.getElementById( "sampleOutput1" ).innerHTML = $visibility;
}else{
document.getElementById( "sampleOutput2" ).innerHTML = $visibility;
}
}
</script>
HTML
<button onclick="setVisibility('visible','sample1');">テーブルを表示</button>
<button onclick="setVisibility('hidden','sample1');">テーブルを非表示</button>
<button onclick="setVisibility('collapse','sample2');">真ん中の列を詰める</button>
<button onclick="setVisibility('visible','sample2');">真ん中の列を詰めない</button>
<br />
<p>テーブルのvisibilityプロパティの値：<span id="sampleOutput1"></span></p>
<p>真ん中の列のvisibilityプロパティの値：<span id="sampleOutput2"></span></p>
<table id="sample1">
<colgroup>
<col span="1">
<col span="1" id="sample2">
<col span="1">
</colgroup>
<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>
<button onclick="setVisibility('hidden','sample1');">テーブルを非表示</button>
<button onclick="setVisibility('collapse','sample2');">真ん中の列を詰める</button>
<button onclick="setVisibility('visible','sample2');">真ん中の列を詰めない</button>
<br />
<p>テーブルのvisibilityプロパティの値：<span id="sampleOutput1"></span></p>
<p>真ん中の列のvisibilityプロパティの値：<span id="sampleOutput2"></span></p>
<table id="sample1">
<colgroup>
<col span="1">
<col span="1" id="sample2">
<col span="1">
</colgroup>
<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>