outlineスタイル属性

定義および使用法

outline 属性をショートカット形式で設定または返却してすべての輪郭属性を設定します。

この属性を使って、以下のいずれかまたは複数の項目を設定/返却できます（任意の順序で）：

輪郭は要素の周りを取り囲む一つの線です。それは要素のマージン周りに表示されますが、 border属性 異なります。

輪郭は要素のサイズの一部ではありませんので、要素の幅および高さ属性には輪郭の幅が含まれません。

も参照してください：

CSSチュートリアル：CSS 輪郭

CSSリファレンスマニュアル：outline属性

例

例1

<div>要素の周りに輪郭を追加します：

document.getElementById("myDiv").style.outline = "thick solid #0000FF";

自分で試してみる

例2

<div>要素の輪郭の幅、スタイルおよび色を変更します：

document.getElementById("myDiv").style.outline = "5px dotted green";

自分で試してみる

例3

<div>要素のoutline属性値を返却します：

alert(document.getElementById("myDiv").style.outline);

自分で試してみる

構文

outline属性の返却：

object.style.outline

outline属性の設定：

object.style.outline = "width style color|initial|inherit"

属性値

値 説明
width 輪郭の幅を設定します。
style 輪郭のスタイルを設定します。
color 輪郭の色を設定します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： medium none invert
戻り値： 文字列で、要素の輪郭の幅、スタイルおよび/または色を示します。
CSSバージョン： CSS2

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート