Wie fügen Sie boolesche Attribute mit JavaScript hinzu? Wie können Sie beispielsweise Folgendes ändern:
<p> zu <p contenteditable>
<p> zu <p data-example>
So fügen Sie ein boolesches Attribut mit JavaScript hinzu
Lesezeit: 5 Minuten
14338200cookie-checkSo fügen Sie ein boolesches Attribut mit JavaScript hinzu
Ryanve
So fügen Sie ein boolesches Attribut hinzu:
node.setAttribute(attributeName, '');
// example:
document.body.setAttribute('hidden', '');
Beachten Sie das leerer String als zweites Argument!
Verwenden node.removeAttribute(attributeName) um ein Attribut zu entfernen, wie von anderen erwähnt.
-
Dies ist die einzige Antwort, die tatsächlich direkt auf die Frage antwortet, wie ein nicht reflektiertes boolesches Attribut gesetzt wird.
– tomturton
12. Oktober 2016 um 7:52 Uhr
-
Korrekte Antwort.
– Benutzer670839
27. März 2020 um 0:01 Uhr
Mathias Bynens
Im Allgemeinen können Sie verwenden element.setAttribute('attributeName', 'value') oder element.propertyName = value um die Attribute oder Eigenschaften eines Elements umzuschalten.
Boolesche Attribute
Legen Sie für boolesche Attribute das Attribut mit dem gleichnamigen Wert fest:
element.setAttribute('disabled', 'disabled');
Das Entfernen eines booleschen Attributs funktioniert genauso wie bei anderen Attributen:
element.removeAttribute('disabled');
Keines Ihrer beiden Beispiele ist es jedoch boolesche Attribute!
contenteditable
contenteditable ist nicht ein boolesches Attribut, es ist ein aufgezähltes Attribut. Seine möglichen Werte sind die leere Zeichenfolge, "true"und "false".
Während setAttribute scheint in diesem Fall übertrieben, Sie könnten es verwenden:
element.setAttribute('contenteditable', 'true');
// to undo:
element.removeAttribute('contenteditable');
Der Eigenschaftsname für die contenteditable Attribut ist contentEditable (Beachte die Hauptstadt E), und es erkennt die Werte 'true', 'false'und 'inherit' – Sie könnten also einfach Folgendes verwenden:
element.contentEditable="true";
// to undo:
element.contentEditable="false";
Beachten Sie, dass 'true' und 'false' sind hier Strings, keine Booleans.
data-example
Für die data-example Attribut, könnten Sie verwenden:
element.setAttribute('data-example', 'some value'); // the value should be a string
// to undo:
element.removeAttribute('data-example');
Oder in Browsern, die unterstützen dataset (siehe die hellgrün markierten auf http://caniuse.com/dataset), Du könntest benutzen:
element.dataset.example="some value";
-
Ah ja aufgezählt :]Vergleichen einer leeren Zeichenfolge
"" === elem.getAttribute('contenteditable')isttruein JavaScript. Aber wenn Sie es mit einem dieser anderen Werte vergleichen, ist es dasfalse. Im Browser für contenteditable werden sowohl “die leere Zeichenfolge als auch das wahre Schlüsselwort dem wahren Zustand zugeordnet”. w3.org/TR/html5/editing.html#contenteditable– ryanve
8. Februar 2012 um 21:49 Uhr
-
@ryanve Na klar;
'' == ''in JavaScript, also wenn Sie verwenden<p contenteditable>oder<p contenteditable="">,p.getAttribute('contenteditable') == ''.– Mathias Bynens
8. Februar 2012 um 21:54 Uhr
-
Dies beantwortet die Frage nicht.
– Kleinfreund
17. August 2017 um 7:57 Uhr
-
@kleinfreund Das ist falsch. Benutzerdefinierte Attribute können nicht sein boolesche Attributeper Definition! Sie könnten So’ne Art Behandeln Sie ein benutzerdefiniertes Attribut so, als wäre es ein boolescher Wert, würde sich aber dennoch anders verhalten als ein echtes boolesches Attribut.
– Mathias Bynens
31. August 2017 um 12:12 Uhr
-
@kleinfreund Ein Beispiel für ein boolesches Attribut ist
hidden.<p hidden>oder<p hidden="">oder<p hidden="hidden">sind alle gleichwertig. Jedes Attribut, das in der Spezifikation nicht als boolesches Attribut definiert ist (einschließlich benutzerdefinierter Attribute), erhält dieses Verhalten nicht auf magische Weise. Für benutzerdefinierte Attribute müssten Sie so etwas selbst implementieren, und es wäre trotzdem keine echte boolesche Eigenschaft, da es im Browser nicht dieselbe Pipeline durchlaufen würde.– Mathias Bynens
1. September 2017 um 17:05 Uhr
Der Nagel
Um ein Attribut zu setzen
Verwenden element.setAttribute: https://developer.mozilla.org/en/DOM/element.setAttribute
Wenn Sie eine hinzufügen id so was:
<p id="p1">
Sie können das Element wie folgt auswählen:
var p1 = document.getElementById("p1");
Festlegen eines booleschen Attributs
Laut dem W3C HTML4-Spezifikation:
Boolesche Attribute können legal einen einzelnen Wert annehmen: den Namen des Attributs selbst
Sie können Ihr Attribut also wie folgt hinzufügen:
p1.setAttribute("contenteditable", "contenteditable");
Um contentEditable festzulegen
Laut dem W3C HTML5-Spezifikationdas Attribut contentEditable können Werte haben true, false und inherit. Dann müsstest du etwa so vorgehen:
p1.setAttribute("contenteditable", "true");
Ehrlich gesagt bin ich mir auch nicht sicher, welches in deiner Situation das Beste ist.
-
Das macht es
<p id="p1" contenteditable="true">was nicht dasselbe ist wie<p id="p1" contenteditable>– ryanve
8. Februar 2012 um 21:20 Uhr
-
@ryanve Es ist das gleiche.
contenteditableist kein boolesches Attribut. Siehe meine Antwort: stackoverflow.com/a/9201499/96656 @TheNail Möglicherweise möchten Sie diese Bearbeitung rückgängig machen, da dies nichts mit booleschen Attributen zu tun hat.– Mathias Bynens
8. Februar 2012 um 21:36 Uhr
-
Gibt es eine Zusammenführungsfunktion für Antworten? 😀
– Der Nagel
8. Februar 2012 um 21:49 Uhr
element.setAttribute('contenteditable','contenteditable')
oder zum löschen:
element.removeAttribute('contenteditable')
Verwenden element.dataset.example um den Wert von zu ändern data-example Attribut.
-
Ich denke, um gleichwertig zu sein, würden Sie es auf eine leere Zeichenfolge setzen.
element.dataset.example = ""Siehe stackoverflow.com/questions/9200712/…– ryanve
8. Februar 2012 um 21:52 Uhr
Zitiert aus MDN:
Boolesche Attribute gelten als wahr, wenn sie überhaupt im Element vorhanden sind, unabhängig von ihrem tatsächlichen Wert; in der Regel sollten Sie den leeren String (“”) in value angeben (einige Leute verwenden den Namen des Attributs; das funktioniert, ist aber kein Standard).
Quelle: https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
-
Ich denke, um gleichwertig zu sein, würden Sie es auf eine leere Zeichenfolge setzen.
element.dataset.example = ""Siehe stackoverflow.com/questions/9200712/…– ryanve
8. Februar 2012 um 21:52 Uhr
Das sind HTML-Attribute. Ob sie boolescher Natur sind, spielt keine Rolle. Für contenteditable können Sie es als Standard-HTML-Attribut/Wert-Paar behandeln
contenteditable="true"– DA.
8. Februar 2012 um 21:13 Uhr
@DA Es spielt keine Rolle, ob Sie sie mithilfe der IDL-Eigenschaft und nicht durch festlegen möchten
setAttribute(). Zum Beispiel dieselectedboolesche Eigenschaft, kann die booleschen Werte empfangentrueoderfalsewährend der Attributwert entweder sein sollteselected(selected="selected") oder die leere Zeichenfolge (selectedoderselected="").– Mathias Bynens
8. Februar 2012 um 21:21 Uhr
@DA In der Spezifikation werden sie als boolesche Attribute bezeichnet w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2
– ryanve
8. Februar 2012 um 21:23 Uhr
contenteditableist kein boolesches Attribut. Siehe meine Antwort: stackoverflow.com/a/9201499/96656– Mathias Bynens
8. Februar 2012 um 21:35 Uhr
Danke für die Klarstellungen! Ja, ich lag falsch. Eine echte boolesche Variable kann nur einen Wert von sich selbst haben. Ich denke, worauf ich hinaus wollte, ist, dass Sie es unabhängig davon, ob es ein boolescher Wert ist oder nicht, wie jede andere HTML-Entität behandeln können, da es einen Wert haben kann. Das heißt, ich weiß nicht, was IDL ist, also könnte das sehr gut etwas ganz anderes sein.
– DA.
8. Februar 2012 um 22:56 Uhr