HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM アンダーラインオブジェクトとは？要素をJavaScriptで操作する方法

HTML DOM のアンダーライン（Underline）オブジェクトは、HTML の <u> 要素を JavaScript から操作するためのインターフェースです。<u> 要素はテキストに下線を引くためのインライン要素で、単なる装飾だけでなく、誤字の指摘や固有名詞の注釈など、意味的な強調を表す場面でも活用されます。

<u> 要素の作成方法

新しい <u> 要素を動的に生成したい場合は、document.createElement() メソッドを使用します。

var uObject = document.createElement("U");

サンプルコード：アンダーライン要素のスタイル変更

次の例では、ページ内の <u> 要素を取得し、ボタンをクリックすると背景色と文字色が切り替わるデモを紹介します。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Underline</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Underline</legend>
            <h2 ><u id="Underline">Warning: </u>This is a Demo Example</h2>
            <input type="button" value="Show" onclick="getBetterDisp()">
        </fieldset>
    </form>
<script>
    var uObject = document.getElementById("Underline");
    function getBetterDisp() {
        uObject.style.backgroundColor = '#DC3545';
        uObject.style.color = '#FFF';
    }
</script>
</body>
</html>

実行結果

Show ボタンをクリックする前の表示：

HTML DOM アンダーラインオブジェクトとは？ u 要素をJavaScriptで操作する方法

Show ボタンをクリックした後の表示：

HTML DOM アンダーラインオブジェクトとは？ u 要素をJavaScriptで操作する方法

ポイント解説

  • document.getElementById() を使うことで、id 属性「Underline」が設定された <u> 要素を簡単に取得できます。
  • style.backgroundColor や style.color プロパティを変更することで、CSS を動的に適用できます。
  • ボタンの onclick イベントに関数を紐付けることで、ユーザーの操作に応じたインタラクティブな演出が可能になります。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注