如何使用 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() 方法，它会返回具有 color 属性的 <font> HTML 元素。
用户可以按照以下语法使用 fontcolor() 方法。
语法
let text = "some text";
text.fontcolor("color");
参数
color − 它是一个颜色代码或颜色名称
返回值
fontcolor() 方法返回 <font> HTML 元素。
<font color="color"> 一些文本 </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() 方法，该方法已弃用，因此不建议使用。
