So ändern Sie das title-Attribut eines Elements mit jQuery

226

Ich habe ein Formulareingabeelement und möchte dessen title-Attribut ändern. Das muss ganz einfach sein, aber aus irgendeinem Grund kann ich nicht finden, wie das geht. Wie wird das gemacht und wo und wie soll ich suchen, wie das geht?

Brian
quelle

Antworten:

463

Bevor wir Code schreiben, wollen wir den Unterschied zwischen Attributen und Eigenschaften diskutieren. Attribute sind die Einstellungen, die Sie auf Elemente in Ihrem HTML-Markup anwenden . Der Browser analysiert dann das Markup und erstellt DOM-Objekte verschiedener Typen, die Eigenschaften enthalten, die mit den Werten der Attribute initialisiert wurden. Bei DOM-Objekten, z. B. einem einfachen HTMLElement, möchten Sie fast immer mit seinen Eigenschaften arbeiten , nicht mit seiner Attributsammlung .

Die derzeitige bewährte Methode besteht darin, die Arbeit mit Attributen zu vermeiden, es sei denn, sie sind benutzerdefiniert oder es gibt keine gleichwertige Eigenschaft, um sie zu ergänzen. Da titlein der Tat als eine Lese- / Schreib existiert Eigenschaft auf vielen HTMLElements, sollten wir sie nutzen.

Weitere Informationen zum Unterschied zwischen Attributen und Eigenschaften finden Sie hier oder hier .

Lassen Sie uns in diesem Sinne das manipulieren title...

Abrufen oder Festlegen der titleEigenschaft eines Elements ohne jQuery

Da titlees sich um eine öffentliche Eigenschaft handelt, können Sie sie für jedes DOM-Element festlegen, das sie mit einfachem JavaScript unterstützt:

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

Das Abrufen ist fast identisch; nichts besonderes hier:

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

Dies ist der schnellste Weg, um den Titel zu ändern, wenn Sie eine Optimierungsnuss sind, aber da Sie jQuery einbeziehen wollten:

Abrufen oder Festlegen der title Eigenschaft eines Elements mit jQuery (v1.6 +)

jQuery hat in Version 1.6 eine neue Methode zum Abrufen und Festlegen von Eigenschaften eingeführt. titleVerwenden Sie zum Festlegen der Eigenschaft für ein Element:

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

Wenn Sie den Titel abrufen möchten, lassen Sie den zweiten Parameter weg und erfassen Sie den Rückgabewert:

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

Lesen Sie die prop()API-Dokumentation zu jQuery.

Wenn Sie wirklich keine Eigenschaften verwenden möchten oder eine Version von jQuery vor Version 1.6 verwenden, sollten Sie weiterlesen:

Abrufen oder Festlegen des title Attributs eines Elements mit jQuery (Versionen <1.6)

Sie können das title Attribut mit dem folgenden Code ändern :

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

Oder rufen Sie es ab mit:

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

Lesen Sie die attr()API-Dokumentation zu jQuery.

Cᴏʀᴏʀ
quelle
5
Wenn dies keine gut konstruierte Antwort ist, gibt es keine. UND es ist so genau wie gut konstruiert. +1 ... (oh, und auch dein Name ist fantastisch, weil er mir gehört :) sogar gleich geschrieben!)
VoidKing
@VoidKing: Ich neige dazu, zu überdenken und aktuelle Antworten zu geben, die populär werden (von denen ich nur wenige habe). Ich versuche, alles bereitzustellen, was ich zu finden hoffe, wenn ich recherchiere oder eine Frage stelle. Ich bin froh, dass du es gefunden hast!
2.
@Cory Nun, um ehrlich zu sein, da ich nach etwas anderem gesucht habe (es war ein langer Weg, aber ich habe gesucht, ob es eine Möglichkeit gibt, das Standard-HTML-Titelfeld zu formatieren). Ich habe nicht gefunden, wonach ich gesucht habe, aber ich habe die Anstrengungen, die Sie in diese Antwort gesteckt haben, wirklich bewundert (Sie haben Ressourcen, reine .js und jQuery usw. gezeigt). Wie auch immer, schöne Antwort!
VoidKing
@VoidKing: Dies ist wahrscheinlich der falsche Ort, um zu antworten. Wenn Sie jedoch über die Standard-Tooltips sprechen, die angezeigt werden, wenn Sie mit der Maus über Elemente mit Alt- oder Titelattributen fahren, gibt Ihnen diese Antwort möglicherweise einen Einblick.
3.
@Cory Danke, Sir!
VoidKing
31

In jquery ui modalen Dialogen müssen Sie dieses Konstrukt verwenden:

$( "#my_dialog" ).dialog( "option", "title", "my new title" );
Igor L.
quelle
3
Lebensretter !! Wenn Sie die oben angegebene Antwort verwenden, wird der Titel einmal geändert, danach ändert sich der Titel nicht mehr, es sei denn, Sie verwenden die Titeloption im Dialogfeld !! DANKE SOOOOOOO VIEL!
Ryan Ellis
Ich bin froh, dass ich die Kommentare gelesen habe ;-) Wenn Sie den Titel mehrmals ändern müssen, müssen Sie ihn in den Dialogoptionen festlegen.
Michel
Ich hätte nie gedacht, dass dies so oft akzeptiert wird. Ich bin sehr froh, dass es geholfen hat :-)
Igor L.
15

Ich glaube

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

oder

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

sollte den Trick machen ...

Ich denke, Sie können alle Kernfunktionen in den jQuery-Dokumenten finden , obwohl ich die Formatierung hasse.

womp
quelle
7

Wenn Sie möchten, können Sie auch das DOM-Element aus dem jQuery-Objekt abrufen und Standard-DOM-Accessoren verwenden:

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

Der "jQuery-Weg", wie von anderen erwähnt, ist die Verwendung der attr () -Methode. Siehe die API-Dokumentation für attr () hier .

Greg Campbell
quelle
2
jqueryTitle({
    title: 'New Title'
});

für den ersten Titel:

jqueryTitle('destroy');

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

Erdi Ertaş
quelle
Dieses Problem kann mithilfe der jquery-Bibliothek selbst gelöst werden. Sie sollten sich nur auf die Verwendung von Bibliotheken von Drittanbietern beziehen, wenn das OP dies erwähnt, oder dies kann nicht ohne die Verwendung einer Bibliothek von Drittanbietern erreicht werden.
Avishek
Ja, aber es gibt noch andere Funktionen. Einfache aber schöne Lösung ... Sie können untersuchen ...
Erdi Ertaş
Es würde einen http-Transportaufwand für die Bibliothek eines Drittanbieters geben, der mit stock / native-Methoden vermieden werden kann.
Avishek
Außerdem gibt es bereits eine allgemein akzeptierte Antwort, die effizienter ist.
Avishek
2

Wenn Sie ein erstellen divund versuchen, ein hinzuzufügen title.

Versuchen

var myDiv= document.createElement("div");
myDiv.setAttribute('title','mytitle');
R Singh
quelle
0

Stellen Sie als Ergänzung zu @ Cᴏʀʏ answer sicher, dass der Titel des Tooltips im HTML-Element noch nicht manuell festgelegt wurde. In meinem Fall hatte die span-Klasse für den Tooltip bereits einen festen Text, daher funktionierte meine JQuery-Funktion $('[data-toggle="tooltip"]').prop('title', 'your new title');nicht.

Als ich das title-Attribut in der HTML-Span-Klasse entfernte, funktionierte die jQuery.

So:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" title="this is my pre-set title text"></span>
</span>

Sollte folgen:

<span class="showTooltip" data-target="#showTooltip" data-id="showTooltip">
      <span id="MyTooltip" class="fas fa-info-circle" data-toggle="tooltip" data-placement="top"></span>
</span>
Nicolas
quelle