如何使用 JavaScript 使文字斜體

在本教程中，我們將學習如何使用 JavaScript 使文字斜體。我們為文字賦予斜體屬性，以將其與句子中的其他文字區分開來。

在 HTML 中，我們可以透過將文字新增到 'i' 標籤中來使文字斜體。但是有時，我們必須使其動態化，而這在 HTML 中是不可能的。然後，我們必須使用 JavaScript 等程式語言來使文字斜體。

讓我們看看如何使用 JavaScript 使文字斜體。以下是我們可以使用 JavaScript 使文字斜體的方法：

  • 使用字串 italics() 方法。

  • 使用樣式 fontStyle 屬性。

  • 透過建立 DOM 斜體物件。

使用字串 italics() 方法

italics() 方法是 JavaScript 中用於使文字斜體的方法。它與 HTML 中的 'i' 標籤的作用相同。此方法只能在字串上呼叫。它也不接受任何引數。

語法

所有使用者都可以遵循以下語法來使用 italics() 方法使用 JavaScript 使文字斜體：

var string = "<Type text here>";
string.italics();

示例

在下面的示例中，我們使用了 italics() 方法使用 JavaScript 使文字斜體。

<html>
<head>
   <title>JavaScript String italics() Method</title>
</head>
<body>
   <h3> Using the <i> italics() </i> method to make a text italic using JavaScript </h3>
   <p id="para"> </p>
   <script>
      var text = "Welcome to the JavaScript";
      document.getElementById('para').innerHTML = text.italics();
   </script>
</body>
</html>

在上面的示例中，使用者可以看到我們使用了 italics() 方法使用 JavaScript 使文字斜體。

使用樣式 fontStyle 屬性

我們可以使用 DOM 樣式的 fontStyle 屬性使文字斜體。我們將此屬性設定為字串值“italic”。

語法

以下是使用 HTML DOM 樣式 fontStyle 屬性使文字斜體的語法：

document.getElementById("paragraph").style.fontStyle = "italic";

示例

在下面的示例中，我們點選按鈕時將斜體樣式應用於文字。

<html>
<body>
   <p id="paragraph">Click the "Make italic" button to make these text italic.</p>
   <button onclick = "italic()"> Make italic </button>
   <script>
      function italic(){
         document.getElementById("paragraph").style.fontStyle = "italic";
      }
   </script>
</body>
</html>

在上面的示例中，使用者可以看到，我們點選按鈕後將文字樣式更改為斜體。

透過建立 DOM 斜體物件

DOM（文件物件模型）是 JavaScript 中用於訪問文件中元素的標準。我們可以透過 JavaScript 中的 DOM 訪問或新增 HTML 的所有元素。我們透過將文字放在 'i' 標籤內來在 HTML 中使文字斜體。同樣，我們可以透過 JavaScript 中的 DOM 新增斜體元素並將文字附加到其中。

語法

所有使用者都可以遵循以下語法來使用 DOM 物件使用 JavaScript 使文字斜體：

var var2 = document.createElement( <Add i tag here> );
var var3 = document.createTextNode( <Add text here> );
var2.appendChild(var3);
document.getElementById( <Add tag id here> ).appendChild(var2);

演算法

  • 步驟 1 - 使用 DOM 建立 'i' 元素。

  • 步驟 2 - 建立文字節點並向其新增文字。

  • 步驟 3 - 將文字節點附加到 'i' 元素。

  • 步驟 4 - 現在，將 'i' 元素附加到任何容器元素。

示例

在下面的示例中，我們使用了 DOM 物件使用 JavaScript 使文字斜體。文件中的文字將在點選按鈕時將樣式更改為斜體。

<html>
<body>
   <p id="para">Click the below buttom to make these text italic.</p>
   <button onclick = "italic()">italic</button>
   <script>
      function italic(){
         var para = document.getElementById("para");
         var add_element = document.createElement('i');
         var text = document.createTextNode(para.innerHTML);
         add_element.appendChild(text);
         para.innerHTML = "";
         para.appendChild(add_element);
      }
   </script>
</body>
</html>

在上面的示例中，使用者可以看到我們使用 JavaScript 中的 DOM 透過點選按鈕將文字樣式更改為斜體。

在本教程中，我們學習了兩種使用 JavaScript 使文字斜體的方法。其中，italics() 是使字串斜體的方法。我們還使用了 DOM 物件使用 JavaScript 中的自定義邏輯使文字斜體。您可以使用這兩種方法使文字斜體，而 italics() 是最簡單的方法。

更新於：2022年10月20日

4K+ 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告