HTML DOM スタイルの textDecorationLine プロパティの使い方を徹底解説
HTML DOM の style.textDecorationLine プロパティは、HTML ドキュメント内の要素テキストに適用される装飾線（下線・上線・打ち消し線など）の種類を取得および変更するために使用されます。JavaScript から動的にテキストの装飾スタイルを制御したい場合に便利なプロパティです。
構文
textDecorationLine プロパティの構文は以下のとおりです。
値を取得する場合
object.style.textDecorationLine
値を設定する場合
object.style.textDecorationLine = "value"
指定できる値
value には以下の値を指定できます。
| 値 | 説明 |
|---|---|
| inherit | 親要素からこのプロパティの値を継承します。 |
| initial | このプロパティの値をデフォルト値にリセットします。 |
| none | 装飾線なしの通常のテキストとして表示します。 |
| underline | テキストに下線を表示します。 |
| overline | テキストの上に線を表示します。 |
| line-through | テキストに打ち消し線（取り消し線）を表示します。 |
サンプルコード
それでは、style の textDecorationLine プロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、段落テキストの装飾線が「打ち消し線」から「下線」に動的に変化します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
text-decoration-line: line-through;
}
.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 textDecorationLine プロパティの例</h1>
<p>これはダミーテキストを含む段落1です。これはダミーテキストを含む段落1です。</p>
<button onclick="add()" class="btn">textDecorationLine を変更</button>
<script>
function add() {
document.querySelector('p').style.textDecorationLine = "underline";
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。初期状態では、段落テキストに「line-through（打ち消し線）」が適用されています。
「textDecorationLine を変更」ボタンをクリックすると、JavaScript によって段落テキストの装飾線が「underline（下線）」に切り替わります。
このように、textDecorationLine プロパティを使えば、CSS を直接書き換えることなく、JavaScript だけでテキストの装飾線を柔軟に制御することができます。
-
HTML DOMスタイルのuserSelectプロパティとは？テキスト選択の制御方法を解説
HTML DOMのuserSelectプロパティは、HTMLドキュメント内で要素のテキストがユーザーによって選択可能かどうかを取得・設定するためのプロパティです。このプロパティを活用することで、Webページ上のテキストのコピーやドラッグによる選択を柔軟に制御できます。構文userSelectプロパティの基本的な構文は以下のとおりです。userSelectの値を取得する場合object.style.userSelectuserSelectの値を設定する場合object.style.userSelect = value;設定できる値valueには以下のいずれかの値を指定できます。値説明autoブラ
-
HTML DOMのstyle.directionプロパティとは？テキスト方向の指定方法を解説
HTML DOMのstyle.directionプロパティは、要素内のテキストの流れる方向（文字方向）を取得・設定するために使用されるプロパティです。デフォルト値は「ltr」となっています。この記事では、directionプロパティの基本的な使い方から、設定できる値、実際に動作するコード例までをわかりやすく解説します。directionプロパティの構文directionプロパティをJavaScriptで設定する場合、以下のような構文を使用します。object.style.direction = ltr|rtl|initial|inherit;設定できる値の一覧directionプロパティには、