Attribut ohne Wert setzen

194

Wie setze ich ein Datenattribut, ohne einen Wert in jQuery hinzuzufügen? Ich will das:

<body data-body>

Ich habe es versucht:

$('body').attr('data-body'); // this is a getter, not working
$('body').attr('data-body', null); // not adding anything

Alles andere scheint die zweiten Argumente als Zeichenfolge hinzuzufügen. Ist es möglich, nur ein Attribut ohne Wert festzulegen?

javascript jquery attributes attr David Hellsing
quelle
3
Warum brauchen Sie data-bodygegen data-body=""?
Explosion Pills
Zumindest wenn Sie XHTML verwenden möchten, sollten Sie dies nicht tun, da die Attributminimierung nicht zulässig ist.
Matthias
9
Ich benutze kein XHTML, ich benutze HTML5
David Hellsing
2
@ user1689607, da ich den generierten HTML-Code als Zeichenfolge speichere und später eine umgekehrte Suche durchführen muss.
David Hellsing
4
@ExplosionPills Ein Beispiel ist das requiredAttribut für die HTML5-Formularüberprüfung. Ich bin sicher, dass es viele andere gültige Anwendungsfälle gibt.
Zero3

Antworten:

250

Die attr()Funktion ist auch eine Setterfunktion. Sie können ihm einfach eine leere Zeichenfolge übergeben.

$('body').attr('data-body','');

Eine leere Zeichenfolge erstellt einfach das Attribut ohne Wert.

<body data-body>

Referenz - http://api.jquery.com/attr/#attr-attributeName-value

attr (attributeName, value)

Lix
quelle
24
+1, aber das OP weiß, dass es ein Setter ist. Die Tatsache, dass das Übergeben einer leeren Zeichenfolge funktioniert, nullaber nicht überraschend ist.
Jon
2
Javasctipt hat einige seltsame Verhaltensweisen . Zu wissen, wo diese Kuriositäten passieren, wird das Element der Überraschung beseitigen: P
Lix
25
Hinweis: Dies funktioniert nicht mit jQuery 1.7.2 (ich weiß, dass dies nicht die neueste Version ist), aber die Verwendung von $(el).prop('data-body', true)hat bei mir funktioniert, wo $(el).attr('data-body', '')letztendlich data-body = "data-body" für mich festgelegt wurde.
Patrick O'Doherty
6
@ PatrickO'Doherty $(el).prop('data-body', true)funktioniert bei mir nicht. attr()funktioniert, fügt aber auch eine leere Zeichenfolge als Wert des Attributs hinzu, das ich hinzufügen möchte.
Webdevotion
1
@ Andrew Ich glaube, dass Sie nach den Funktionen removeAttr / prop suchen . Es hängt davon ab, welches Attribut Sie entfernen möchten.
Lix
47

Vielleicht versuchen Sie:

var body = document.getElementsByTagName('body')[0];
body.setAttribute("data-body","");
Callum McLean
quelle
2
Nur diese Lösung hat bei mir var btn = $(this).get(0); btn.setAttribute("disabled","");
funktioniert
1
Nachdem ich mit .attr und .prop herumgespielt hatte, wie in allen anderen Lösungen und Kommentaren hier vorgeschlagen, stellte ich schließlich fest, dass das Zurückkehren (oder zumindest "auf halbem Weg" zurück) zu nativem JS den Trick tat, wie in der Kommentar oben ... Prost dafür!
TheCuBeMan
22

Die akzeptierte Antwort erstellt kein reines Namensattribut mehr (Stand September 2017).

Sie sollten die JQuery prop () -Methode verwenden, um Nur-Namen-Attribute zu erstellen.

$(body).prop('data-body', true)
Charlie
quelle
Eigentlich scheine ich meiner Auswahloption "value = 'true'" hinzuzufügen, anstatt nur "value". Pfui.
RonLugge
Ich habe mich gefragt, warum die akzeptierte Antwort diese Lösung nicht enthält! Es ist der sauberste Weg mit jquery.
Denns
Funktioniert nicht in ausgewählten Dropdown-Optionen, leider in Chrome
MC9000
7

Sie können es ohne jQuery tun!

Beispiel:

document.querySelector('button').setAttribute('disabled', '');
<button>My disabled button!</button>
Erweitern Sie das Snippet

Um den Wert eines booleschen Attributs festzulegen, z. B. deaktiviert, können Sie einen beliebigen Wert angeben. Eine leere Zeichenfolge oder der Name des Attributs sind empfohlene Werte. Alles was zählt ist, dass wenn das Attribut überhaupt vorhanden ist, unabhängig von seinem tatsächlichen Wert, sein Wert als wahr angesehen wird. Das Fehlen des Attributs bedeutet, dass sein Wert falsch ist. Indem Sie den Wert des Attributs disabled auf die leere Zeichenfolge ("") setzen, setzen wir disabled auf true, was dazu führt, dass die Schaltfläche deaktiviert wird.

Von MDN Element.setAttribute ()

LipESprY
quelle
1
jQuery ist in dieser Hinsicht zu flockig. Am besten in Javascript, damit Sie sich nicht jedes Mal verrückt machen, wenn sich jquery oder Browser ändern. Dies gilt für all diese fehlerhaften Client-Frameworks.
MC9000
1

Ich bin mir nicht sicher, ob dies wirklich vorteilhaft ist oder warum ich diesen Stil bevorzuge, aber was ich (in Vanille js) mache, ist:

document.querySelector('#selector').toggleAttribute('data-something');

Dadurch wird das Attribut in Kleinbuchstaben ohne Wert hinzugefügt oder entfernt, wenn es bereits im Element vorhanden ist.

https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute

Brent N.
quelle