如何使用 JavaScript 返回文本的颜色？

在本教程中，我们将学习如何使用 JavaScript 返回文本的颜色。在样式中（它是 HTML 的规则，用于描述文档如何在浏览器中呈现），我们在该 HTML 规则下定义颜色。

要使用 JavaScript 返回文本的颜色，我们必须使用 JavaScript 的 color 属性。color 属性用于为 HTML 标签（如 p、h1、h2、body 等）内部的文本分配颜色，并且借助标签的 id，我们可以返回特定文本的颜色。通常，我们将以字符串形式获取颜色，如果颜色具有特定的名称，则返回该颜色，否则返回其 RGB 组合。

语法

我们在概述中讨论了 JavaScript 的 color 属性，现在让我们看看返回文本颜色的语法 -

<HTML Tag id="myId" style="color:green;">Text that colour we have to return</HTML Tag>
document.write ( document.getElementById("myId").style.color );

在上面的语法中，我们使用包含 id 的“HTML 标签”（如 p、body、h1、h2）声明了一个名为“我们要返回其颜色的文本”的文本名称（这将用于在我们要对该文本执行某些操作时表示段落），并且文本的颜色在这里是“绿色”在 HTML 的“style”规则下的“color”属性中。

借助属性document.write，我们使用属性document.getElementById（用于访问包含 id 的内容）和文本的“myId”打印文本的颜色。

算法

我们已经看到了使用 JavaScript 返回文本颜色的语法，让我们一步一步地查看完整的算法，以便更好地理解它 -

  • 首先，我们将使用“function”关键字和函数的适当名称声明一个函数。

  • 声明函数后，我们在其中定义函数的主体，因为函数应该执行某些工作并提供某些输出。

  • 该函数包含两个属性 document .write 和document.getElementById。

  • 借助document.getElementById，我们使用该段落的 id 访问段落文本，并使用style.color属性获取该段落文本的颜色。

  • 借助 document.write，我们能够将该颜色名称打印到屏幕上。

  • 首先，我们使用<P>标签创建一个文本，该标签声明其 id 并还为段落中存在的文本声明颜色。

  • 我们将使用<form>标签创建一个表单以在其中创建按钮。

  • 在表单中，我们将使用<button>标签创建一个按钮输入，它将使用 onclick 事件调用所需的函数。

我们已经了解了使用 JavaScript 返回文本颜色的一些基本步骤，现在让我们看一些示例，以便更好地理解上述定义的步骤。

示例

在此示例中，我们将创建一个函数和一个表单。在表单中，我们将创建按钮，按下该按钮我们可以调用我们的函数，并且该函数将返回段落文本的颜色，此处将为字符串数据类型。

<!DOCTYPE html>
<html>
<head>
   <script>
      function display() {
         document.write(document.getElementById("myId").style.color);
      }
   </script>
</head>
<body>
   <h2>Return the color of the text with JavaScript</h2>
   <p id="myId" style="color:green;">This is the text with green colour</p>
   <br>
   <form>
      <button type="button" onclick="display()">Click to get color</button>
   </form>
</body>
</html>

在上面的代码中，首先，我们创建了一个带有 id 的段落，然后我们在主体中创建了一个表单并在其中定义了一个输入方法，该方法将在我们为其定义 onclick 事件时单击时调用“display”函数。“Display”函数将借助段落 id “myId”以及 document.getId 和 style.color 属性返回该段落的颜色。

结论

在本教程中，我们学习了如何使用 JavaScript 函数返回文本的颜色。为此，我们使用 HTML 的规则（“style”）下的 color 属性。我们创建一个表单，该表单调用一个已定义的函数，在该函数中，我们使用该段落或任何 Html 元素的 id 来返回该段落或 HTML 元素文本的颜色名称。此处 style.color 属性的返回类型为字符串。

更新于：2022-11-07

4K+ 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告