如何使用 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万+ 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告