在 JavaScript 中更改页面标题

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中更改页面标题

作者：迹忆客最近更新：2024/03/23 浏览次数：

本文将讨论在 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>