style.outlineWidthは、要素のスタイル属性のoutline-widthプロパティの値を取得、もしくは、設定するプロパティ。
outline-widthプロパティは、要素のアウトライン（輪郭線）の幅を指定することができる。
構文
取得
var $outlineWidth = $elementReference.style.outlineWidth;
戻り値
要素のスタイル属性のoutline-widthプロパティの値。
設定
$elementReference.style.outlineWidth = "thin | medium | thick | length | inherit";
- thin | medium | thick | length | inherit
- アウトラインの幅を指定。
- 下記の何れかの方法で指定する。初期設定値は、「medium」。
- thin：細い。
- medium：中くらい。
- thick：太い。
- length：絶対値。「px」や「pt」などの単位を付けた数値で指定。
- inherit：親要素のアウトラインの幅を継承。
サンプル
サンプルボックス要素
変更後のoutline-widthプロパティの値：
サンプルの動作について
- 「設定（細い）」ボタンをクリックすると、「サンプルボックス要素」のアウトラインを細い線にし、「変更後のoutline-widthプロパティの値：」の右横に「thin」と表示する。
- 「設定（中くらい）」ボタンをクリックすると、「サンプルボックス要素」のアウトラインを中くらいの太さの線にし、「変更後のoutline-widthプロパティの値：」の右横に「medium」と表示する。
- 「設定（太い）」ボタンをクリックすると、「サンプルボックス要素」のアウトラインを太い線にし、「変更後のoutline-widthプロパティの値：」の右横に「thick」と表示する。
- 「設定（1px）」ボタンをクリックすると、「サンプルボックス要素」のアウトラインの幅を1pxにし、「変更後のoutline-widthプロパティの値：」の右横に「1px」と表示する。
- 「設定（1em）」ボタンをクリックすると、「サンプルボックス要素」のアウトラインの幅を1emにし、「変更後のoutline-widthプロパティの値：」の右横に「1em」と表示する。
- 「設定（継承）」ボタンをクリックすると、「サンプルボックス要素」のアウトラインの幅を親要素から継承し、「変更後のoutline-widthプロパティの値：」の右横に「inherit」と表示する。
サンプルのソースコード
JavaScript
<script type="text/javascript">
function setOutlineWidth( $outlineWidth ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.outlineWidth = $outlineWidth;
var $outlineWidth = $elementReference.style.outlineWidth;
document.getElementById( "sampleOutput" ).innerHTML = $outlineWidth;
}
</script>
function setOutlineWidth( $outlineWidth ) {
var $elementReference = document.getElementById( "sample" );
$elementReference.style.outlineWidth = $outlineWidth;
var $outlineWidth = $elementReference.style.outlineWidth;
document.getElementById( "sampleOutput" ).innerHTML = $outlineWidth;
}
</script>
HTML
<div id="sample" style="outline: 5px solid red;background-color: yellow; margin: 18px; width: 300px; height: 200px;"> サンプルボックス要素</div>
<button onclick="setOutlineWidth('thin');">設定（細い）</button>
<button onclick="setOutlineWidth('medium');">設定（中くらい）</button>
<button onclick="setOutlineWidth('thick');">設定（太い）</button>
<button onclick="setOutlineWidth('1px');">設定（1px）</button>
<button onclick="setOutlineWidth('1em');">設定（1em）</button>
<button onclick="setOutlineWidth('inherit');">設定（継承）</button>
<p>変更後のoutline-widthプロパティの値：<span id="sampleOutput"></span></p>
<button onclick="setOutlineWidth('thin');">設定（細い）</button>
<button onclick="setOutlineWidth('medium');">設定（中くらい）</button>
<button onclick="setOutlineWidth('thick');">設定（太い）</button>
<button onclick="setOutlineWidth('1px');">設定（1px）</button>
<button onclick="setOutlineWidth('1em');">設定（1em）</button>
<button onclick="setOutlineWidth('inherit');">設定（継承）</button>
<p>変更後のoutline-widthプロパティの値：<span id="sampleOutput"></span></p>