在 JavaScript 中更改頁面標題

Shiv Yadav 2023年1月30日 2022年5月1日
  1. 使用 document.title 屬性更改 JavaScript 中的頁面標題
  2. 使用 querySelector() 方法更改 JavaScript 中的頁面標題
在 JavaScript 中更改頁面標題

本文將討論在 JavaScript 中動態修改網頁的標題。

使用 document.title 屬性更改 JavaScript 中的頁面標題

document.title 屬性用於設定或檢索文件的當前標題。可以通過將新標題作為字串分配給此屬性來修改頁面的標題。

然後網站的標題將更改為選定的標題。

語法:

newPageTitle = 'Title changed!';
document.title = newPageTitle;

例子:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Dynamically change a web
            page's title
        </title>
    </head>
    <body>
        <b>
            Dynamically change a web
            page's title
        </b>
        <p>
            Click on the button to change the page
            title to: "title changed!"
        </p>
        <button onclick="changePageTitle()">
            Change Page Title
        </button>
        <script type="text/javascript">
            function changePageTitle() {
                newPageTitle = 'title changed!';
                document.title = newPageTitle;
            }
        </script>
    </body>
</html>

點選按鈕前的輸出:

點選按鈕前的標題

點選按鈕後的輸出:

單擊按鈕後的標題

使用 querySelector() 方法更改 JavaScript 中的頁面標題

我們可以使用 document.querySelector() 方法來選擇文件中的元素。

可以通過給標題元素一個選擇器引數並檢索頁面的主標題元素來選擇標題元素。

元素的 textContent 屬性返回特定位置的文字內容。可以通過將 textContent 屬性設定為所需的新標題作為字串來修改頁面的標題。

語法:

newPageTitle = 'title changed!';
document.querySelector('title').textContent = newPageTitle;

例子:

<!DOCTYPE html>
<html>
    <head>
        <title>
            Dynamically change a web
            page's title
        </title>
    </head>
    <body>
        <b>
            Dynamically change a web
            page's title
        </b>
        <p>
            Click on the button to change the page
            title to: "title changed!"
        </p>
        <button onclick="changePageTitle()">
            Change Page Title
        </button>
        <script type="text/javascript">
            function changePageTitle() {
                newPageTitle = 'title changed!';
                document.querySelector('title').textContent = newPageTitle;
            }
        </script>
    </body>
</html>

點選按鈕前的輸出:

點選按鈕前的頁面標題

點選按鈕後的輸出:

單擊按鈕後的頁面標題

Author: Shiv Yadav
Shiv Yadav avatar Shiv Yadav avatar

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.

LinkedIn