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

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

この記事のポイント

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

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

ページのタイトルは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) => {

			let 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に代入し、そのままコンソール出力しています。

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

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

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

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

この記事のポイント

目次