web-dev-qa-db-fra.com

Comment changer l'attribut title d'un élément avec jQuery

J'ai un élément d'entrée de formulaire et je souhaite modifier son attribut title. Cela doit être simple comme bonjour, mais pour une raison quelconque, je ne trouve pas comment faire cela. Comment cela se fait-il et où et comment devrais-je chercher comment faire cela?

220
Brian

Avant d'écrire un code, discutons de la différence entre attributs et propriétés. Les attributs sont les paramètres que vous appliquez aux éléments de votre HTML markup; le navigateur analyse ensuite le balisage et crée des objets DOM de différents types contenant propriétés initialisés avec les valeurs des attributs. Sur les objets DOM, tels qu'un simple HTMLElement, vous voulez presque toujours travailler avec sa collection propriétés, pas avec sa collection attributs.

La meilleure pratique actuelle consiste à éviter de manipuler des attributs, à moins qu’ils ne soient personnalisés ou qu’aucune propriété équivalente ne les complète. Étant donné que title existe bel et bien en tant que propriété en lecture/écriture sur plusieurs HTMLElements, nous devrions en tirer parti.

Vous pouvez en savoir plus sur la différence entre les attributs et les propriétés ici ou ici .

Dans cet esprit, manipulons ce title...

Obtenir ou définir la propriété title d'un élément without ​​jQuery

title étant une propriété publique, vous pouvez la définir sur tout élément DOM qui la prend en charge avec du code JavaScript pur:

document.getElementById('yourElementId').title = 'your new title';

La récupération est presque identique. rien de spécial ici:

var elementTitle = document.getElementById('yourElementId').title;

Ce sera le moyen le plus rapide de changer le titre si vous êtes un fou d’optimisation, mais puisque vous vouliez impliquer jQuery:

Obtention ou définition d'un title --- property avec jQuery (v1.6 +)

jQuery a introduit une nouvelle méthode dans la v1.6 pour obtenir et définir les propriétés. Pour définir la propriété title sur un élément, utilisez:

$('#yourElementId').prop('title', 'your new title');

Si vous souhaitez récupérer le titre, omettez le deuxième paramètre et capturez la valeur de retour:

var elementTitle = $('#yourElementId').prop('title');

Consultez la documentation prop() API pour jQuery.

Si vous vraiment ​​ne voulez pas utiliser les propriétés, ou si vous utilisez une version de jQuery antérieure à la v1.6, vous devriez lire ce qui suit:

Récupère ou définit un title --- attribut ​​avec jQuery (versions <1.6)

Vous pouvez changer le titleattribut ​​avec le code suivant:

$('#yourElementId').attr('title', 'your new title');

Ou le récupérer avec:

var elementTitle = $('#yourElementId').attr('title');

Consultez la documentation attr() API pour jQuery.

437
Cᴏʀʏ

Dans les boîtes de dialogue modales jquery ui, vous devez utiliser cette construction:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );
30
Igor L.

Je crois

$("#myElement").attr("title", "new title value")

ou

$("#myElement").prop("title", "new title value")

devrait faire l'affaire ...

Je pense que vous pouvez trouver toutes les fonctions principales dans jQuery Docs , bien que je déteste le formatage.

16
womp

Une autre option, si vous préférez, serait d’obtenir l’élément DOM de l’objet jQuery et d’utiliser les accesseurs DOM standard:

$("#myElement")[0].title = "new title value";

La "méthode jQuery", comme mentionné par d'autres, consiste à utiliser la méthode attr (). Voir la documentation de l'API pour attr () ici .

7
Greg Campbell

Si vous créez un div et essayez d’y ajouter un title.

Essayer

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');
2
R Singh
jqueryTitle({
    title: 'New Title'
});

pour le premier titre:

jqueryTitle('destroy');

https://github.com/ertaserdi/jQuery-Title

2
Erdi Ertaş