HTML DOM スタイル outlineStyle プロパティの使い方をわかりやすく解説
DOMのstyle.outlineStyleプロパティは、HTMLドキュメント内の要素の周囲に描画されるアウトラインのスタイルを取得（返却）および変更するために使用されます。アウトラインは要素のborderの外側に表示される線であり、レイアウトや要素のサイズに影響を与えない点が、borderプロパティとの大きな違いです。
構文
outlineStyleプロパティの構文は以下のとおりです。
outlineStyleの値を取得する場合
object.style.outlineStyle
outlineStyleの値を設定する場合
object.style.outlineStyle = "value"
設定できる値
outlineStyleプロパティには、主に以下の値を指定できます。
- none：アウトラインを表示しない（初期値）
- hidden：アウトラインを非表示にする
- dotted：点線のアウトライン
- dashed：破線のアウトライン
- solid：実線のアウトライン
- double：二重線のアウトライン
- groove：溝が彫られたように見える立体線
- ridge：隆起して見える立体線
- inset：要素がへこんで見える立体線
- outset：要素が浮き上がって見える立体線
- initial：既定値にリセットする
- inherit：親要素の値を継承する
サンプルコード
style outlineStyleプロパティの具体的な使用例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
background-color: seagreen;
height: 200px;
width: 200px;
outline: 2px solid #000;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM Style outlineStyle Property Example</h1>
<p></p>
<button onclick="add()" class="btn">Add outline</button>
<script>
function add() {
document.querySelector('p').style.outlineStyle = "dashed";
}
</script>
</body>
</html>出力結果
上記のコードを実行すると、次のような画面が表示されます。
「Add outline」ボタンをクリックすると、JavaScriptによって緑色のボックスの周囲のアウトラインのスタイルが「dashed（破線）」に変化します。
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri
-
HTML DOM スタイルの textTransform プロパティとは？使い方を解説
DOM スタイルの textTransform プロパティは、HTML ドキュメント内の要素のテキストに対して、大文字・小文字への変換を取得（参照）および適用するために使用されます。JavaScript から動的にテキストの表示形式を変更したい場合に便利なプロパティです。 構文 textTransform プロパティの基本的な構文は以下のとおりです。 値の取得（Returning textTransform） object.style.textTransform 値の設定（Modifying textTransform） object.style.textTransform = value;