[HTML5] JavaScriptでtitleタグを変更する

  • このエントリーをはてなブックマークに追加
  • LINEで送る

小ネタです。
titleタグの内容を指定した文字列に変更する場合は2つの方法があります。

まずはdocument.titleプロパティに直接値を代入する方法。基本的にはこちらを利用します。

document.title = 'foo'

次にtitle以外の要素を変更するときと同様にquerySelector()で返却されたHTMLElementを操作する方法もあります。

document.querySelector('title').textContent = 'foo'
- Sponsored Link -

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>ボタンを押すとここが変化するよ</title>
</head>
<body>

<h1>titleタグを変更するサンプル</h1> 

<button type="button" id="orange">オレンジ</button>
<button type="button" id="apple">りんご</button>
<button type="button" id="banana">バナナ</button>

<script>
document.querySelector('#orange').addEventListener('click', ()=>{
  document.title = '🍊オレンジ';
})
document.querySelector('#apple').addEventListener('click', ()=>{
  document.title = '🍎りんご';
})
document.querySelector('#banana').addEventListener('click', ()=>{
  document.title = '🍌バナナ';
})
</script>
</body>
</html>

参考ページ

コメント

感想やご質問などお気軽にどうぞ。広告が表示されている場合は下にスクロールしてください。投稿にはSNSへのログインが必要です。

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPal(ペイパル)
PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま
- Sponsored Link -