JavaScript

レシピ

ブラウザ

ページのタイトルを書き換える

ページのタイトルを動的に書き換える方法について解説します。

この記事のポイント

  • ページのタイトルを動的に書き換える
  • ページのタイトルを取得する

目次

ページのタイトルを書き換える

ページのタイトルはdocumentオブジェクトtitleプロパティから取得したり変更することができます。
以下の例ではボタンを押すとページタイトルが書き換わります。

ページタイトルはタブに表示されます
ページタイトルはタブに表示されます
ボタンを押すとタイトルが書き換わる
ボタンを押すとタイトルが書き換わる

コードは次のようになります。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>GRAYCODE JavaScript</title>
	<script>
		window.addEventListener('load', (event) => {

			document.getElementById('button1').addEventListener('click', () => {
				document.title = document.getElementById('button1').textContent;
			});

			document.getElementById('button2').addEventListener('click', () => {
				document.title = document.getElementById('button2').textContent;
			});

			document.getElementById('button3').addEventListener('click', () => {
				document.title = document.getElementById('button3').textContent;
			});
		});
	</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<button id="button1">タイトル1</button>
<button id="button2">タイトル2</button>
<button id="button3">タイトル3</button>
</body>
</html>

赤字の箇所document.titleプロパティに新しいタイトルを代入する形で書き換えを行っています。

ボタンは3つともクリックのイベントリスナーと同じ処理が設定されています。
クリックするとボタンのラベルをtextContentプロパティで取得して、その値をそのままdocument.titleプロパティに代入します。

ページのタイトルを取得する

先にページタイトルの書き換え方法をみてきましたが、タイトルを取得する場合は次のようにdocument.titleプロパティを参照する形で行います。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>GRAYCODE JavaScript</title>
	<script>
		window.addEventListener('load', (event) => {

			var title = document.title;
			console.log(title);
		});
	</script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<button id="button1">タイトル1</button>
<button id="button2">タイトル2</button>
<button id="button3">タイトル3</button>
</body>
</html>

document.titleプロパティから取得したページタイトルを変数titleに代入し、そのままコンソール出力しています。

ページタイトルを取得して出力

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。