style.whiteSpaceプロパティ

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

white-spaceプロパティは、空白(スペース)、タブ、改行の取扱いを指定することができる。

構文

取得

var $whiteSpace = $elementReference.style.whiteSpace;

戻り値

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

設定

$elementReference.style.whiteSpace = "normal | nowrap | pre | inherit";
normal | nowrap | pre | inherit
下記の何れかの値を指定する。初期設定値は「normal」。
  • normal:連続する空白、タブ、改行を、1つの空白、タブ、改行にまとめる。自動改行あり。
  • nowrap:連続する空白、タブ、改行を、1つの空白、タブ、改行にまとめる。自動改行なし。
  • pre:連続する空白、タブ、改行を、そのまま表示。自動改行なし。
  • inherit:親要素の設定を継承。

サンプル


サンプルのwhite-spaceプロパティの値:

Sample Element Sample Element
サンプル 要素 サンプル 要素

サンプルの動作について

各ボタンをクリックすると、ボタン名のテキストを、サンプル要素の「white-spaceプロパティ」の値に設定する。設定値を「サンプルのwhite-spaceプロパティの値:」の右横に表示する。

サンプルのソースコード

JavaScript

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

HTML

<button onclick="setWhiteSpace('normal');">normal</button>
<button onclick="setWhiteSpace('nowrap');">nowrap</button>
<button onclick="setWhiteSpace('pre');">pre</button>
<button onclick="setWhiteSpace('inherit');">inherit</button>
<br />
<p>サンプルのwhite-spaceプロパティの値:<span id="sampleOutput"></span></p>
<p id="sample" style="font-size: 16px; width: 200px; border: 1px solid red; background-color: yellow;">
   Sample   Element   Sample   Element
   <br />
   サンプル   要素   サンプル   要素
</p>

スポンサード リンク

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