outlineStyleスタイル属性

定義と使用法

outlineStyle 属性は要素周りの輪郭のスタイルを設定または返します。

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

輪郭は要素のサイズの一部ではありません。したがって、要素の幅と高さ属性には輪郭の幅が含まれていません。

も参照してください：

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

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

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

インスタンス

例1

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

document.getElementById("myDiv").style.outlineStyle = "solid";

自分で試してみてください

例2

<div>要素の輪郭スタイルを変更します：

document.getElementById("myDiv").style.outlineStyle = "solid";

自分で試してみてください

例3

<div>要素の輪郭スタイルを返します：

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

自分で試してみてください

例4

すべての異なる値のデモンストレーション：

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.outlineStyle = listValue;

自分で試してみてください

構文

outlineStyle属性を返します：

object.style.outlineStyle

outlineStyle属性を設定します：

object.style.outlineStyle = value

属性値

値 説明
none デフォルト。輪郭なしを定義します。
hidden 輪郭が閉じられます。
dotted 点状輪郭を定義します。
dashed 点線輪郭を定義します。
solid 実線輪郭を定義します。
double 二重線輪郭を定義します。二重線の幅は outline-width の値。
groove 3D凹槽輪郭を定義します。3D凹槽輪郭を定義します。この効果は outline-color 値。
ridge 3D凸槽輪郭を定義します。この効果は outline-color 値。
inset 3D凹辺輪郭を定義します。この効果は outline-color 値。
outset 3D凸辺輪郭を定義します。この効果は outline-color 値。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit 親要素からこの属性を継承します。参照してください inherit。

技術的詳細

デフォルト値： none
返り値： 文字列、要素の輪郭のスタイルを表す。
CSSバージョン： CSS2

ブラウザサポート

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