如何使用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+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告