資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 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 的任何元素或標籤的文字。
9K+ 瀏覽量
