在 JavaScript 中更改頁面標題
Shiv Yadav
2023年1月30日
2022年5月1日
本文將討論在 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 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