JavaScript 中如何使用 Document.title()？

可以使用 document.title 屬性獲取或更改文件的當前標題。如果存在，則預設使用 <title> 的值。

您可以使用 document.title 屬性更改或獲取文件的當前標題。透過為此屬性提供一個新的標題字串，可以更改頁面的標題。所選標題將立即反映在網站的標題中。

在這篇文章中，您將看到兩種用於更改或使用 JavaScript 中 Document.title() 的方法。

  • 使用 document.title 屬性 - 您可以使用 document.title 屬性設定或獲取文件的當前標題。透過將新標題作為字串傳遞給此屬性，可以修改頁面的標題。透過這樣做，將更改網站的標題。

語法

以下是 document.title 屬性的語法

newPageTitle = 'The title has changed!';
document.title = newPageTitle;

值

包含文件標題的字串。如果透過設定修改了標題，則包含 document.title 的值。如果沒有，則存在標記指定的標題。

文件的新標題是 newTitle。賦值會影響文件的返回值。title，即為文件釋出的標題，例如視窗或選項卡的標題欄中的標題，以及對頁面的 DOM 的影響，例如 HTML 文件中 <title> 元素的內容。

示例 1

在繼續之前，讓我們瞭解一下在這個例子中如何編寫 Document.title 來執行。

<!DOCTYPE html>
<html>
<title>Document.title() use in JavaScript - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <script>

      // displays "Document.title() use in JavaScript - TutorialsPoint"
      document.write(document.title +'<br>');
      document.title = "Title has been changed!";
      document.write(document.title); // displays "Title has been changed!"
   </script>
</body>
</html>

注意 - 您可以在瀏覽器上看到更改後的標題。

示例 2

使用 document.title 屬性 - 在此示例中，讓我們瞭解如何使用 javascript 動態更改文件的標題。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
      Describes how to use JavaScript to dynamically modify a web page's title.
   </title>
</head>
<body style="text-align:center">
   <h1 style="color: rgba(15, 15, 151, 0.839)">
      Tutorialspoint
   </h1>
   <b>
      Once you click the button you will see the document/page title will be changed dynamically.
   </b>
   <p>
      Click on the button: "Tutorialspoint is changed title!"
   </p>
   <button onclick="switchTitle()">
      Change Page Title
   </button>
   <script type="text/javascript">
      function switchTitle() {
         switchTitle = 'Tutorialspoint is changed title!';
         document.querySelector('title').textContent = switchTitle;
      }
   </script>
</body>
</html>

注意 - 您可以在瀏覽器上看到更改後的標題。

  • 使用 querySelector() 方法 - 要選擇特定的文件元素，請使用 document.querySelector() 方法。可以透過將其作為引數包含在選擇中來選擇 title 元素。這將返回頁面的當前 title 元素。透過元素的“textContent”屬性返回節點的特定文字內容。透過提供一個字串作為新標題的“textContent”屬性值，可以更新頁面的標題。結果，將使用所需標題作為網站的新標題。

語法

以下是 querySelector() 方法的語法

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

示例 3

使用 querySelector() 方法 - 在此示例中，讓我們瞭解如何使用 javascript document.querySelector() 方法來返回頁面的當前 title 元素。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>
      Describes how to use JavaScript that will return the current title element of the page.
   </title>
</head>
<body style="text-align:center">
   <h1 style="color: rgba(15, 15, 151, 0.839)">
      Tutorialspoint
   </h1>
   <b>
      Once you click the button you will see the document/page title will be changed dynamically.
   </b>
   <p>
      Click on the button: "Tutorialspoint is changed title!"
   </p>
   <button onclick="switchTitle()">
      Change Title
   </button>
   <script type="text/javascript">
      function switchTitle() {
         newDocTitle = 'Tutorialspoint is changed title!';
         document.querySelector('title').textContent = newDocTitle;
      }
   </script>
</body>
</html>

注意 - 您可以在瀏覽器上看到更改後的標題。

更新於：2022年8月23日

6K+ 次瀏覽

開啟您的 職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.