style.maxWidthプロパティ

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

max-widthプロパティは、要素の幅の最大値を指定することができる。

構文

取得

var $maxWidth = $elementReference.style.maxWidth;

戻り値

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

設定

$elementReference.style.maxWidth = "none | length | percentage | inherit";
none | length | percentage | inherit
要素の幅の最大値を指定。
下記の何れかの値を指定する。初期設定値は、「auto」。
  • none:制限しない。
  • length:絶対値。「px」や「pt」などの単位を付けた数値で指定。
  • percentage:「%」や「em」を付けた割合で指定。割合で指定。
  • inherit:親要素の幅の最大値の設定を継承。

サンプル

変更後のmaxWidthプロパティの値:

 サンプルボックス要素

サンプルの動作について

  • 「制限しない」ボタンをクリックすると、「サンプルボックス要素」の幅の最大値を設定しないので、widthプロパティに指定してある「500px」の幅になる。「変更後のmaxWidthプロパティの値:」の右横に「none」と表示する。
  • 「300px」ボタンをクリックすると、「サンプルボックス要素」の幅の最大値を「300px」に設定する。widthプロパティに指定してある「500px」よりも最大値の方が小さいので、「300px」の幅になる。「変更後のmaxWidthプロパティの値:」の右横に「300px」と表示する。
  • 「30em」ボタンをクリックすると、「サンプルボックス要素」の幅の最大値を「30em」に設定する。widthプロパティに指定してある「500px」よりも最大値の方が小さいので、「30em」の幅になる。「変更後のmaxWidthプロパティの値:」の右横に「30em」と表示する。
  • 「50%」ボタンをクリックすると、「サンプルボックス要素」の幅の最大値を「50%」に設定する。widthプロパティに指定してある「500px」よりも最大値の方が小さいので、「50%」の幅になる。「変更後のmaxWidthプロパティの値:」の右横に「50%」と表示する。
  • 「継承」ボタンをクリックすると、「サンプルボックス要素」の幅の最大値の設定を親要素から継承し、「変更後のmaxWidthプロパティの値:」の右横に「inherit」と表示する。

サンプルのソースコード

JavaScript

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

HTML

<button onclick="setMaxWidth('none');">制限しない</button>
<button onclick="setMaxWidth('300px');">300px</button>
<button onclick="setMaxWidth('30em');">30em</button>
<button onclick="setMaxWidth('50%');">50%</button>
<button onclick="setMaxWidth('inherit');">継承</button>
<p>変更後のmaxWidthプロパティの値:<span id="sampleOutput"></span></p>
<div id="sample" style="outline: 1px solid red; background-color: yellow; margin: 18px; width: 500px; height: 200px;"> サンプルボックス要素</div>

スポンサード リンク

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