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

HTML DOM イタリック（Italic）オブジェクトとは？使い方とサンプルコードを解説

イタリックオブジェクトとは

HTML DOM のイタリック（Italic）オブジェクトは、テキストを斜体（イタリック体）で表示する <i> 要素を表すオブジェクトです。JavaScript を使って動的に <i> 要素を生成し、ページ上のテキストを斜体に変換したい場合に活用できます。

構文（Syntax）

<i> 要素を作成する基本的な構文は以下の通りです。

var italicObject = document.createElement("I");

document.createElement() メソッドの引数に "I" を指定することで、新しい <i> 要素を生成できます。

サンプルコード

ここでは、入力フォームに入力されたテキストを、ボタンをクリックすると斜体に変換して表示する例を紹介します。

<!DOCTYPE html>
<html>
<head>
<title>Italic Object</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>Italic Object</legend>
<label for="textSelect">Formatter: </label>
<input id="textSelect" type="text" placeholder="John Doe">
<input type="button" onclick="convertItalic()" value="Check">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var textSelect = document.getElementById("textSelect");
    function convertItalic() {
        var italicObject = document.createElement("I");
        var italicText = document.createTextNode(textSelect.value);
        italicObject.appendChild(italicText);
        divDisplay.appendChild(italicObject);
    }
</script>
</body>
</html>

コードの解説

  • document.createElement("I"): 新しい <i> 要素を生成します。
  • document.createTextNode(): 入力欄に入力されたテキストからテキストノードを作成します。
  • appendChild(): 作成したテキストノードを <i> 要素に追加し、さらに表示用の div 要素に追加しています。

実行結果

このコードを実行すると、以下のように動作します。

「Check」ボタンをクリックする前：

テキスト入力欄と「Check」ボタンが表示され、まだ何も出力されていません。

「Check」ボタンをクリックした後：

入力されたテキストが斜体（イタリック体）に変換され、画面に表示されます。

まとめ

HTML DOM のイタリックオブジェクトを使えば、JavaScript だけで動的に斜体テキストを生成できます。createElement("I") で要素を作成し、createTextNode() でテキストを追加するという流れを覚えておくと、他の要素（<b> や <em> など）でも同じ手法を応用できるので便利です。

  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 ではサポートされていないため注