如何使用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>

当用户点击按钮时，它会改变所有文字的颜色在粉红色和蓝色之间。

使用String的fontcolor()方法

在这个部分，我们将学习关于 fontcolor() 方法。我们可以将 fontcolor() 方法应用在任何文本字符串上，并且它返回具有颜色属性的 <font> HTML元素。

用户可以按照以下语法使用 fontcolor() 方法。

语法

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

参数

color −它是一个颜色代码或颜色名

返回值

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

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

示例

在下面的例子中，我们将使用String的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()方法，因此不建议使用该方法。