HTML DOM StyleのtextDecorationStyleプロパティとは？使い方と設定値を徹底解説
DOM StyleのtextDecorationStyleプロパティは、HTMLドキュメント内の要素テキストに表示される装飾線（下線・上線・取り消し線など）のスタイルを取得・変更するために使用されます。
このプロパティを使うことで、JavaScriptから動的にテキスト装飾線を実線や波線などに切り替えることができます。
構文
textDecorationStyleプロパティの基本的な構文は以下のとおりです。
値の取得
object.style.textDecorationStyle
値の設定
object.style.textDecorationStyle = "value"
設定できる値
valueには以下の値を指定できます。
| 値 | 説明 |
|---|---|
| inherit | 親要素からこのプロパティの値を継承します。 |
| initial | このプロパティの値をデフォルト値に設定します。 |
| solid | 装飾線を実線（一本の直線）として表示します。 |
| double | 装飾線を二重線として表示します。 |
| dotted | 装飾線を点線として表示します。 |
| dashed | 装飾線を破線として表示します。 |
| wavy | 装飾線を波線として表示します。 |
使用例
ここでは、textDecorationStyleプロパティを使って段落テキストの装飾線スタイルを動的に変更する例を見てみましょう。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
text-decoration-line: underline;
}
.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 textDecorationStyle Property Example</h1>
<p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.</p>
<button onclick="add()" class="btn">Change textDecorationStyle</button>
<script>
function add() {
document.querySelector('p').style.textDecorationStyle = "wavy";
}
</script>
</body>
</html>出力結果
上記のコードを実行すると、次のような画面が表示されます。
「Change textDecorationStyle」ボタンをクリックすると、段落テキストの装飾線が通常の下線から波線（wavy）に変化します。
このように、textDecorationStyleプロパティを活用すれば、ユーザーの操作に応じてテキスト装飾の見た目を柔軟に制御することが可能です。CSSのtext-decoration-lineプロパティと組み合わせることで、より表現力豊かなテキストデザインを実現できます。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOMのcolumnGapプロパティとは？使い方とサンプルコードをわかりやすく解説
HTML DOM のスタイルにおける columnGap プロパティは、マルチカラムレイアウトにおいて、要素内のカラム（段組み）同士の間隔を指定するために使用されます。CSS の column-gap を JavaScript から動的に操作したい場合に活用できます。 columnGap プロパティの基本構文 columnGap プロパティを JavaScript で設定する際の基本構文は以下のとおりです。 object.style.columnGap = length|normal|initial|inherit; 指定できる値の一覧 columnGap プロパティには、次の4種類の値