style.minWidthは、要素のスタイル属性のmin-widthプロパティの値を取得、もしくは、設定するプロパティ。
min-widthプロパティは、要素の幅の最小値を指定することができる。
構文
取得
var $minWidth = $elementReference.style.minWidth;
戻り値
要素のスタイル属性のmin-widthプロパティの値。
設定
$elementReference.style.minWidth = "none | length | percentage | inherit";
- none | length | percentage | inherit
- 要素の幅の最小値を指定。
- 下記の何れかの値を指定する。初期設定値は、「auto」。
- length：絶対値。「px」や「pt」などの単位を付けた数値で指定。
- percentage：「%」や「em」を付けた割合で指定。
- inherit：親要素の幅の最小値の設定を継承。
サンプル
変更後のminWidthプロパティの値：
サンプルボックス要素
サンプルの動作について
- 「300px」ボタンをクリックすると、「サンプルボックス要素」の幅の最小値を「300px」に設定する。widthプロパティに指定してある「200px」よりも最小値の方が大きいので、「300px」の幅になる。「変更後のminWidthプロパティの値：」の右横に「300px」と表示する。
- 「30em」ボタンをクリックすると、「サンプルボックス要素」の幅の最小値を「30em」に設定する。widthプロパティに指定してある「200px」よりも最小値の方が大きいので、「30em」の幅になる。「変更後のminWidthプロパティの値：」の右横に「30em」と表示する。
- 「50%」ボタンをクリックすると、「サンプルボックス要素」の幅の最小値を「50%」に設定する。widthプロパティに指定してある「200px」よりも最小値の方が大きいので、「50%」の幅になる。「変更後のminWidthプロパティの値：」の右横に「50%」と表示する。
- 「継承」ボタンをクリックすると、「サンプルボックス要素」の幅の最小値の設定を親要素から継承し、「変更後のminWidthプロパティの値：」の右横に「inherit」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setMaxWidth( $minWidth ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.minWidth = $minWidth;
var $minWidth = $elementReference.style.minWidth;
document.getElementById( "sampleOutput" ).innerHTML = $minWidth;
}
</script>
function setMaxWidth( $minWidth ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.minWidth = $minWidth;
var $minWidth = $elementReference.style.minWidth;
document.getElementById( "sampleOutput" ).innerHTML = $minWidth;
}
</script>
HTML
<button onclick="setMaxWidth('300px');">300px</button>
<button onclick="setMaxWidth('30em');">30em</button>
<button onclick="setMaxWidth('50%');">50%</button>
<button onclick="setMaxWidth('inherit');">継承</button>
<p>変更後のminWidthプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="outline: 1px solid red; background-color: yellow; margin: 18px; width: 200px; height: 200px;"> サンプルボックス要素</div>
<button onclick="setMaxWidth('30em');">30em</button>
<button onclick="setMaxWidth('50%');">50%</button>
<button onclick="setMaxWidth('inherit');">継承</button>
<p>変更後のminWidthプロパティの値：<span id="sampleOutput"></span></p>
<div id="sample" style="outline: 1px solid red; background-color: yellow; margin: 18px; width: 200px; height: 200px;"> サンプルボックス要素</div>