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+ 次浏览

开启您的 职业生涯

完成课程获得认证

开始学习
广告