如何使用 JavaScript 更改文字的字型顏色？

本教程將教我們如何使用JavaScript更改文字的字型顏色。在使用 JavaScript 開發應用程式前端時，需要在事件發生時使用 JavaScript 更改文字的字型顏色。

例如，我們有一個可以開啟或關閉裝置的應用程式。我們有一個按鈕來開啟或關閉裝置。當裝置開啟時，將按鈕文字設定為綠色。否則，將按鈕文字設定為紅色。

因此，在這種情況下，程式設計師需要使用 JavaScript 更改字型顏色。我們有一些不同的方法可以解決這個問題，如下所示。

訪問元素並更改樣式

在本節中，我們將使用 JavaScript 透過 ID 或類名訪問元素。使用者可以使用.style屬性更改元素的樣式。此外，我們還可以更改特定的樣式，例如元素顏色、背景顏色、大小等。

在我們的例子中，我們將更改顏色屬性值來更改字型顏色。使用者可以按照以下語法使用 JavaScript 更改字型顏色。

語法

let element = document.getElementById(' element_id ');
element.style.color = colorCode;

引數

  • colorName − 這是使用者想要應用於文字的新顏色。它可以是顏色名稱、顏色的十六進位制程式碼或 RGB 值。

示例

在下面的示例中，我們建立了一個按鈕。當用戶單擊該按鈕時，我們將呼叫名為changeFontColor() 的函式。在函式內部，我們使用其 ID 訪問按鈕元素，並使用其樣式的顏色屬性更改顏色。

<html>
<head>
   <style>
      button {
         height: 30px;
         width: 100px;
      }
   </style>
</head>
<body>
   <h2> Change the font color using JavaScript.</h2>
   <div id = "fonts"> Click the button to change the color of font inside the button.</div>
   <button onclick = "changeFontColor()" id = "btn" >change color</button>
   <script>
 
      // function to change the font color of button
      function changeFontColor() {
         let button = document.getElementById("btn"); // access the button by id
         let color = button.style.color;
         if (color == "red") { // if button color is red change it green otherwise change it to red.
            button.style.color = 'green';
         } else {
            button.style.color = 'red';
         }
      }
   </script>
</body>
</html>

當用戶單擊“更改顏色”按鈕時，它將使按鈕顏色在綠色和紅色之間切換。

更改所有文字的顏色

在本節中，我們將學習如何更改所有正文文字的顏色。您可以考慮這種情況。當我們將深色或淺色主題應用於應用程式時，逐個更改每個元素的顏色並不是一個好習慣。相反，我們只需單擊一下即可更改所有正文文字的顏色。

使用者可以按照以下語法更改正文文字的字型顏色。

語法

document.body.style.color = color

示例

在下面的示例中，我們將更改所有正文文字的顏色，而不是更改特定元素的文字。

<html>
<head>
   <style>
      button {
         height: 30px;
         width: 100px;
      }
      body {
         color: blue;
      }
   </style>
</head>
<body>
   <h2> Change the font color using JavaScript.</h2>
   <div id = "fonts"> Click the button to change the color of font of the whole body</div>
   <button onclick = "changeFontColor()" id = "btn">change color</button>
   <script>
      
      // function to change the font color of button
      function changeFontColor() {

         // toggle the body text color on button click.
         let color = document.body.style.color;
         if (color == "blue") {
            document.body.style.color = 'pink';
         } else {
            document.body.style.color = 'blue';
         }
      }
   </script>
</body>
</html>

當用戶單擊按鈕時，它將更改所有文字的顏色，在粉色和藍色之間切換。

使用字串 fontcolor() 方法

在本節中，我們將學習fontcolor()方法。我們可以將fontcolor()方法應用於任何文字字串，它將返回帶有顏色屬性的<font> HTML 元素。

使用者可以按照以下語法使用fontcolor()方法。

語法

let text = "some text";
text.fontcolor("color");

引數

  • color − 它是顏色程式碼或顏色名稱

返回值

  • fontcolor() 方法返回 <font> HTML 元素。

<font color="color"> some text </font>

示例

在下面的示例中，我們將使用字串 fontcolor() 方法更改特定字串的顏色。

<html>
<head>
   <style>
      button {
         height: 30px;
         width: 100px;
      }
   </style>
</head>
<body>
   <h2> Change the font color using JavaScript.</h2>
   <div> Click the button to change the color of below text using <i>
   fontcolor() </i> method.</div>
   <div id="fonts"> hello world!</div>
   <button onclick = "changeFontColor()" id = "btn">change color</button>
   <script>

      // function to change the font color of button
      function changeFontColor() {
         let fontsDiv = document.getElementById("fonts");
         let string = "hello world";
         fontsDiv.innerHTML = string.fontcolor("green");
      }
</script>
</body>
</html>

在輸出中，使用者可以觀察到，當他們單擊按鈕時，“hello world”的字型會變為綠色。

在本教程中，我們學習瞭如何透過單擊一次來更改正文的所有文字。此外，我們還學習瞭如何使用元素的 style 屬性更改單個元素的文字顏色。在最後一節中，我們學習了fontcolor()方法，該方法已棄用，因此不建議使用。

更新於：2023年9月12日

4萬+ 次瀏覽

開啟你的職業生涯

完成課程獲得認證

開始學習
廣告