この記事は 2021年2月11日 に書かれたものです
小ネタです。
titleタグの内容を指定した文字列に変更する場合は2つの方法があります。
まずはdocument.titleプロパティに直接値を代入する方法。基本的にはこちらを利用します。
document.title = 'foo'
次にtitle以外の要素を変更するときと同様にquerySelector()で返却されたHTMLElementを操作する方法もあります。
document.querySelector('title').textContent = 'foo'
サンプルコード
<!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>
参考ページ
このブログを応援する
お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。
