如何使用 JavaScript 查找按钮上显示的文本？

在本教程中，我们将讨论使用 JavaScript 查找按钮上显示的文本的不同方法。按钮上的文本显示单击按钮后会发生什么。为了提取按钮上的文本，JavaScript 为我们提供了以下两个属性。

  • 使用 innerHTML 属性
  • 使用 innerText 属性

让我们详细讨论以上两个属性。

使用 innerHTML 属性

innerHTML 属性不仅允许我们获取任何标签内的文本，还允许我们将文本设置为任何标签。此属性还允许我们在设置文本时以字符串的形式传递任何其他标签以及文本。它会将传递的标签的属性应用于其内部的文本。而如果我们尝试获取任何标签内的文本，它只会返回文本，而不会返回目标元素内的任何嵌套子标签。

语法

以下语法将显示如何使用 innerHTML 属性查找任何元素内的文本。

let variable_name = document.getElementById("id").innerHTML;

以上语法将提取与括号内传递的 id 关联的元素内的文本。

步骤

  • 步骤 1 - 我们首先在 HTML 文档中创建一个按钮并为其分配一个 id。
  • 步骤 2 - 接下来，我们使用 innerHTML 属性获取按钮标签上的文本。
  • 步骤 3 - 在第三步中，我们将使用上述步骤中 innerHTML 属性提取的按钮标签内的文本显示在用户屏幕上。

让我们看看程序示例，我们将找到按钮上显示的文本。

示例 1

以下示例将说明如何使用 innerHTML 属性提取按钮标签内的文本 -

<html>
<body>
   <button id="btn">click me!</button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerHTML;
      document.getElementById("result").innerHTML = "The text visible on
      the button: <b>" + text + "</b>";
   </script>
</body>
</html>

在此示例中，我们使用 innerHTML 属性使用 JavaScript 查找按钮上显示的文本。在这里，我们使用其 id 在 btn 内获取元素，然后在 btn 上使用 innerHTML 属性获取文本并将其存储在 text 中。

示例 2

以下示例将显示如果按钮在其内部包含任何其他标签，则 innerHTML 属性的行为 -

<html>
<body>
   <button id="btn"><b>click me!</b></button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerHTML;
      document.getElementById("result").innerHTML = "The text visible on the button: <b>" + text + "</b>";
   </script>
</body>
</html>

在上面的示例中，我们可以清楚地看到输出与上一个示例输出类似，而我们使用了 粗体 标签在其中，这意味着 innerHTML 属性只会返回按钮标签内的文本，而不会返回它包含的任何类型的标签。

使用 innerText 属性

innerText 属性的行为也类似于 innerHTML 属性。与 innerHTML 类似，它也允许我们获取并将文本设置为任何 HTML 标签。但与 innerHTML 不同的是，它不允许我们传递带有文本的标签。如果这样做，它会将标签视为文本，并按原样显示在用户屏幕上。而如果我们尝试提取文本，它只会返回标签内的文本。

语法

以下语法显示了我们如何使用 innerText 属性 -

let variableName = document.getElementById("id").innerText;

此语法将提取特定 HTML 标签内的文本并将其存储在给定的变量中

步骤

  • 步骤 1 - 在第一步中，我们将在 HTML 文档中定义一个按钮标签，我们将尝试查找其文本。
  • 步骤 2 - 在下一步中，我们将使用如上语法所示的 innerText 属性获取按钮标签内的文本。
  • 步骤 3 - 在此步骤中，我们将在屏幕上向用户显示输出。

让我们讨论一下它在程序示例中的实际实现 -

示例 3

以下示例将说明如何使用 innerText 属性获取按钮上显示的文本。

<html>
<body>
   <button id="btn">click me!</button>
   <p id="result"></p>
   <script>
      let btn = document.getElementById("btn");
      let text = btn.innerText;
      document.getElementById("result").innerHTML = "The text visible on the button: <b>" + text + "</b>";
   </script>
</body>
</html>

在上面的示例中，我们使用了 innerText 属性使用 JavaScript 查找按钮内的文本。与前面的示例类似，首先我们使用其 id 定位元素，然后使用 innetText 属性提取文本

注意 - 如果目标元素在其内部包含任何其他元素，则 innerText 和 innerHTML 属性的行为将类似，如 innerHTML 属性的 示例 2 所示。

在本教程中，我们学习了如何使用 JavaScript 的 innerHTML 和 innerText 属性查找按钮上显示的文本。我们还讨论了如果按钮标签在其内部包含任何其他标签，这两个属性将如何表现。我们可以使用这些属性获取和设置 HTML 的任何元素或标签的文本。

更新于: 2022-10-31

9K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告