HTML DOM スタイルの textDecorationColor プロパティとは？使い方を解説
DOM のスタイル textDecorationColor プロパティは、HTML ドキュメント内の要素に適用されたテキスト装飾（下線・取り消し線など）の色を取得および変更するために使用されます。
テキストに下線や取り消し線などの装飾が設定されている場合、このプロパティを使うことで、その装飾線だけの色を個別に指定できます。
構文
textDecorationColor プロパティの基本的な構文は以下のとおりです。
値を取得する場合
object.style.textDecorationColor
値を変更する場合
object.style.textDecorationColor = "color"
「color」には、カラーネーム（例：red）、16進数カラーコード（例：#db133a）、RGB 値など、CSS で有効な色の値を指定します。
サンプルコード
ここでは、textDecorationColor プロパティを使用して、段落テキストの取り消し線の色を変更する例を紹介します。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
}
p {
margin: 1.5rem auto;
text-decoration: 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 textDecorationColor 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 textDecorationColor</button>
<script>
function add() {
document.querySelector('p').style.textDecorationColor = "#db133a";
}
</script>
</body>
</html>実行結果
上記のコードを実行すると、次のような画面が表示されます。
この状態では、段落テキストにはデフォルトの色で取り消し線が引かれています。ここで「Change textDecorationColor」ボタンをクリックしてみましょう。
ボタンをクリックすると、JavaScript の add() 関数が呼び出され、querySelector() メソッドで取得した p 要素に対して textDecorationColor プロパティに「#db133a」が設定されるため、取り消し線の色が赤系の色に変更されます。
対応ブラウザについて
textDecorationColor プロパティは、主要なモダンブラウザ（Chrome、Firefox、Safari、Edge など）でサポートされています。ただし、古いバージョンのブラウザでは動作しない場合があるため、実際のプロジェクトで使用する際は対象ブラウザでの動作確認をおすすめします。
-
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;