Maison >interface Web >js tutoriel >Comment changer le titre de la page avec javascript

Comment changer le titre de la page avec javascript

青灯夜游
青灯夜游original
2021-10-20 15:55:282662parcourir

Méthode : 1. Utilisez "document.getElementsByTagName("title")[0].innerText = 'value'"; 2. Utilisez "document.title='value'" 3. Utilisez "$('title') .html('valeur')".

Comment changer le titre de la page avec javascript

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

title est un élément de nœud spécial en HTML, car il peut utiliser document.getElementsByTagName("title")[0] pour obtenir la balise de titre de la page Web, mais il ne peut pas utiliser document. getElementsByTagName("title")[0].innerHtml est utilisé pour modifier sa valeur. Après les tests, il existe deux façons de modifier le js natif, et cela peut également être facilement défini dans jQuery. Laissez-moi vous le présenter ci-dessous.
document.getElementsByTagName("title")[0]来获取网页的title标签,但却无法用document.getElementsByTagName("title")[0].innerHtml用更改它的值。经测试原生js有两种方式可以修改,jQuery中也能简单设置。下面给大家介绍一下。

innerText 方式

通过console.log(document.getElementsByTagName("title")[0]),发现能打印出b2386ffb911b14667cb8f0f91ea547a7标签,标签里面只有文字节点,故猜测只能识别TextNode,所以用innerText方式设置title的值,果然成功了。

document.getElementsByTagName("title")[0].innerText = '需要设置的值';

document.title方式

经过测试,还可通过document.title 设置title的值。

console.log(document.title);      # 可以获取title的值。
document.title = '需要设置的值';    # 设置title的值。

例子

window.onfocus = function () {
 document.title = '恢复正常了...';
};
window.onblur = function () {
 document.title = '快回来~页面崩溃了';
};

我们在浏览器取得了焦点和失去焦点的时候改变title的值,可以发现切换浏览器选项卡的时候,title发生了改变。

jQuery方式

当然如果你的项目里面依赖jQuery,可以使用jq的方法设置

$('title').html('值')

$('title').text('值')

jq中两种方式都可以实现

总结

原生js中我们可以通过 innerText , document.title 两种方式动态修改网页的title .

jq中我们可以通过 $('title').html('值') 或者 $('title').text('值')

Méthode innerText

Grâce à console.log(document.getElementsByTagName("title")[0]), j'ai trouvé que la balise b2386ffb911b14667cb8f0f91ea547a7 Il ne contient que des nœuds de texte, donc je suppose qu'il ne peut reconnaître que TextNode, j'utilise donc innerText pour définir la valeur du titre, et cela réussit.

rrreeeMéthode document.title

Après le test, la valeur du titre peut également être définie via document.title. 🎜rrreee🎜Exemple🎜rrreee🎜Nous modifions la valeur du titre lorsque le navigateur obtient le focus et le perd. Vous pouvez constater que le titre change lors du changement d'onglet du navigateur. 🎜🎜Méthode jQuery
🎜🎜Bien sûr, si votre projet repose sur jQuery, vous pouvez utiliser la méthode jq pour le définir🎜rrreee🎜Les deux méthodes peuvent être implémentées dans jq🎜🎜Résumé
🎜🎜En js natif, nous pouvons modifier dynamiquement le titre de la page Web de deux manières : innerText et document.title.
🎜🎜jq Nous pouvons le modifier via $('title').html('value') ou $('title').text('value'). 🎜🎜Ce qui précède est la méthode détaillée pour changer le TITRE du navigateur avec JS. Si vous le trouvez utile, ajoutez-le simplement à vos favoris. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Vidéos de programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn