テキストはあらゆるアプリケーションや Web ページにとって最も重要で最も目に見える資産であり、テキストを使用しないと作成者は自分の考えを完全に伝えたり、情報を適切に配信したりすることができません。その必要性と重要性により、そのスタイルはほとんどの開発者にとって悪夢にもなります。静的テキストの場合、CSS プロパティとそのフレームワークは非常に役立ちますが、それでもスタイルに動的に適用できるプロパティが必要です。幸いなことに、このプロパティは「」という名前の JavaScript によって提供されています。 テキスト装飾 ”。
このブログでは、textDecoration プロパティを使用して HTML 要素にスタイルを適用する手順を説明します。
HTML DOM スタイルの textDecoration プロパティを使用してスタイルを適用する方法
DOM スタイル」 テキスト装飾 ” プロパティは基本的に” を追加するようなスタイルを実行します。 「下線」、「上線」、「スルーライン」、「ブリンク」 選択した要素の上に「」を押します。このプロパティを「」に設定すると、 なし 」は、アンカー タグのようにその要素に適用されているデフォルトのスタイルを削除します。
構文
DOM スタイルの textDecoration プロパティの構文は次のとおりです。
eleObj. スタイル 。 テキスト装飾 = 'なし|上線|点滅|下線|頭文字|スルーライン|継承'
以下の表にアクセスして、「」に割り当てることができる値について簡単に理解してください。 テキスト装飾 ' 財産：
| 価値 | 説明 |
|---|---|
| なし | テキストをプレーン形式に変換し、事前定義されたスタイルをすべて削除します。それがデフォルトです。 |
| 上線 | 選択したテキストの上または上に線を挿入します。 |
| まばたきする | テキストを点滅させますが、すべての Web ブラウザでサポートされているわけではありません。 |
| 下線 | 選択したテキストの下または一番下に行を配置します。 |
| イニシャル | 適用されたプロパティをデフォルト値 (この場合は none) に設定します。 |
| ラインスルー | 線をテキストの中央、つまりテキストの間に配置します。 |
| あなたは継承します | ルート要素または親要素に適用されるプロパティを継承します。 |
ここで、実装プロセスと、「」の各値のテキストへの影響を見てみましょう。 テキスト装飾 ' 財産。
例 1: 「textDecoration = none」プロパティ
「」の実践 テキスト装飾 ” の値を持つプロパティ なし 」については、以下のコードで説明します。
< 体 >
< 中心 >
< h1 スタイル = 「色: カデットブルー;」 > Linux < / h1 >
< ボタン クリック時 = 「アプライヤ()」 > アプライヤー < / ボタン >
< p > textDecoration プロパティの値が none に設定されている場合: < / p >
< h3 ID = '使用事例' スタイル = 'テキスト装飾: 上線;' > 対象となる要素 < / h3 >
< / 中心 >
< 脚本 >
関数アプライヤー() {
document.getElementById('useCase').style.textDecoration = 'none';
}
< / 脚本 >
< / 体 >
上記のコードの説明:
- まず、「<」を利用します。 ボタン >」タグを使用してボタンを作成し、それに「」のイベントリスナーを割り当てます。 クリック時 ”。このイベント リスナーは、「」という名前の JavaScript 関数をトリガーします。 アプライヤー ”。
- 次に、対象となる要素を作成します。 h3 ” に一意の ID を割り当てます。 使用事例 ”。また、CSSを適用します。 テキスト装飾 ” プロパティの値は “ 上線 」の助けを借りて スタイル ' 属性。
- 次に、「」を入力します。 アプライヤー ()” 関数本体を選択し、その ID を介して対象の要素を選択します。 使用事例 ” とスタイルを添付します” テキスト装飾 ' 財産。
- その後、プロパティに「」の値を割り当てます。 なし 」を使用して、要素に事前に適用されているテキスト装飾スタイルを削除します。
上記のコードを実行した後の Web ページの表示:
出力には、ターゲット要素に適用されている事前スタイル設定が、値「」を割り当てることで削除されることが示されています。 なし ”。
例 2: 「textDecoration = 初期」プロパティ
以下のコード スニペットは、「」の実装を示しています。 テキスト装飾 ”プロパティの値が”の場合 イニシャル ” が割り当てられています。
< 脚本 >関数 アプライヤー ( ） {
書類。 getElementById ( '使用事例' ） 。 スタイル 。 テキスト装飾 = 'イニシャル' ;
}
脚本 >
上記のコードのコンパイル後に生成される出力を以下に示します。
上記の出力は、テキスト装飾の値がデフォルト値である「」に設定されていることを示しています。 なし ” そのため、すべての事前のスタイリングが元に戻されました。
例 3: 「textDecoration = overline」プロパティ
以下のコードは、「」の実際の実装を示しています。 テキスト装飾 ”プロパティの値が”の場合 上線 ” が提供されます。
< 体 >< 中心 >
< h1 スタイル = 「色: カデットブルー;」 > Linux < / h1 >
< ボタン クリック時 = 「アプライヤ()」 > アプライヤー < / ボタン >
< p > textDecoration プロパティの値が overline に設定されている場合: < / p >
< h3 ID = '使用事例' > 対象となる要素 < / h3 >
< / 中心 >
< 脚本 >
関数アプライヤー() {
document.getElementById('useCase').style.textDecoration = 'オーバーライン';
}
< / 脚本 >
< / 体 >
上記のコードの説明は次のとおりです。
- まず、「 ボタン」と「h3 ” 要素も同じ方法で作成され、CSS プロパティがその上に適用されます。 「h3」 要素が削除されました。
- 次に、「」の内部 アプライヤー ” 関数で対象の要素が選択され、” テキスト装飾 ” の値を持つプロパティ 上線 ” が要素に割り当てられます。
上記のコードを実行した後の出力は以下に表示されます。
出力には「」の効果が示されています。 textDecoration = 上線 ” プロパティをテキスト上に追加します。
例 4: 「textDecoration = 下線」プロパティ
の値が「」の場合のテキストの実際の実装 下線 ” が” に割り当てられます。 テキスト装飾 」プロパティは次のように説明されています。
< 脚本 >関数 アプライヤー ( ） {
書類。 getElementById ( '使用事例' ） 。 スタイル 。 テキスト装飾 = 「下線」 ;
}
脚本 >
コンパイル後の出力は次のようになります。
出力には、テキストの下部に行が追加されたことが示されています。
例 5: 「textDecoration = line-through」プロパティ
「」の視覚的な実装 テキスト装飾 ” の値を持つプロパティ ラインスルー 」を以下に示します。
< 脚本 >関数 アプライヤー ( ） {
書類。 getElementById ( '使用事例' ） 。 スタイル 。 テキスト装飾 = 「ラインスルー」 ;
}
脚本 >
上記のコードに対して生成された出力を以下に示します。
出力には、「」によって行われた効果が表示されます。 ラインスルー 」を対象の要素テキストの上に重ねます。
結論
HTML DOM スタイル テキスト装飾 」プロパティは、特に JavaScript を介して HTML 要素のスタイルを処理し、テキスト要素に対して動的なスタイルを実行します。この「」には複数の値を割り当てることができます。 テキスト装飾 」を選択して、さまざまなバリエーションのスタイリングを実行します。これらの値は「 「なし」、「オーバーライン」、「アンダーライン」、「ラインスルー」、「イニシャル」、「ブリンク」、「継承」 ”。このブログでは、開発者が textDecoration プロパティを使用してスタイルを適用できるプロセスを説明しました。