Wie verweise ich auf eine Javascript-Objekteigenschaft mit einem Bindestrich?

Verwenden dieses Skripts , um ein Stilobjekt aller geerbten Stile usw. zu erstellen.

var style = css($(this));
alert (style.width);
alert (style.text-align);

Mit der folgenden Funktion funktioniert die erste Warnung einwandfrei, die zweite jedoch nicht. -Ich nehme an, sie interpretiert das als Minus. Der Debugger sagt "nicht erfasster Referenzfehler". Ich kann es jedoch nicht in Anführungszeichen setzen, da es sich nicht um eine Zeichenfolge handelt. Wie verwende ich diese Objekteigenschaft?

BEARBEITEN

In den Kommentaren sehen Sie, dass die Notation für CSS-Eigenschaften mit einer Reihe von Eigenschaften nicht kompatibel ist. Die Verwendung der Notation des Kamelkastens ist daher der derzeitige Weg

obj.style-attr // would become 

obj["styleAttr"]

Verwenden Sie die Tastenschreibweise anstelle des Punkts

style["text-align"]

Alle Arrays in js sind Objekte und alle Objekte sind nur assoziative Arrays. Dies bedeutet, dass Sie auf eine Stelle in einem Objekt genauso verweisen können wie auf einen Schlüssel in einem Array.

arr[0]

oder das Objekt

obj["method"] == obj.method

Ein paar Dinge, die Sie beachten sollten, wenn Sie auf diese Weise auf Eigenschaften zugreifen

1. Sie werden ausgewertet. Verwenden Sie daher Zeichenfolgen, es sei denn, Sie tun etwas mit einem Zähler oder verwenden dynamische Methodennamen.

   Dies bedeutet, dass obj [Methode] Ihnen einen undefinierten Fehler geben würde, während obj ["Methode"] dies nicht tun würde

2. Sie müssen diese Notation verwenden, wenn Sie Zeichen verwenden, die in js-Variablen nicht zulässig sind.

Diese Regex fasst es ziemlich gut zusammen

[a-zA-Z_$][0-9a-zA-Z_$]*

CSS-Eigenschaften mit a -werden in camelCase in Javascript-Objekten dargestellt. Das wäre:

alert( style.textAlign );

Sie können auch eine Klammernotation verwenden, um die Zeichenfolge zu verwenden:

alert( style['text-align'] );

Eigenschaftsnamen dürfen nur Zeichen, Zahlen, das bekannte $Zeichen und das _(dank pimvdb) enthalten.

Die Antwort auf die ursprüngliche Frage lautet: Setzen Sie den Eigenschaftsnamen in Anführungszeichen und verwenden Sie die Indexierung im Array-Stil:

obj['property-with-hyphens'];

Einige haben darauf hingewiesen, dass die Eigenschaft, an der Sie interessiert sind, eine CSS-Eigenschaft ist. CSS-Eigenschaften mit Bindestrichen werden automatisch in Kamelhüllen konvertiert. In diesem Fall können Sie den Namen in Kamelhülle wie folgt verwenden:

style.textAlign;

Diese Lösung funktioniert jedoch nur für CSS-Eigenschaften. Beispielsweise,

obj['a-b'] = 2;
alert(obj.aB);          // undefined
alert(obj['a-b']);      // 2

Verwenden Sie Klammern:

var notTheFlippingStyleObject = {
    'a-b': 1
};

console.log(notTheFlippingStyleObject["a-b"] === 1); // true

Weitere Infos zu Objekten: MDN

HINWEIS: Wenn Sie die zugreifen Stil Objekt, CSSStyleDeclaration , Camelcase verwenden müssen , um Zugriff es von Javascript. Mehr Infos hier

alert(style.textAlign)

oder

alert(style["textAlign"]);

Um die Frage direkt zu beantworten: style['text-align']So würden Sie auf eine Eigenschaft mit einem Bindestrich verweisen. Aber style.textAlign(oder style['textAlign']) sollte in diesem Fall verwendet werden.

Stilmerkmale mit Bindestrich werden in JavaScript über camelCase referenziert. Verwenden Sie daher style.textAlign.

So lösen Sie Ihr Problem : Die CSS-Eigenschaften mit Bindestrichen werden in camelCase durch JavaScript-Eigenschaften dargestellt , um dieses Problem zu vermeiden. Sie wollen : style.textAlign.

So beantworten Sie die Frage : Verwenden Sie die eckige Klammer : Diesobj.prop ist dasselbe, obj["prop"]damit Sie mithilfe von Zeichenfolgen auf Eigenschaftsnamen zugreifen und Zeichen verwenden können, die in Bezeichnern verboten sind.

Die Objekteigenschaftsnamen stimmen nicht eins zu eins mit den CSS-Namen überein.

Ich denke , im Fall von CSS - Stilen sie in Camelcase Javascript erhalten geändert , so test-alignwird textAlign. Im allgemeinen Fall, in dem Sie auf eine Eigenschaft zugreifen möchten, die nicht standardmäßige Zeichen enthält, verwenden Sie den Array-Stil. ['text-align']

Zuerst frage ich mich, warum die Lösung an meinem Ende nicht funktioniert hat

api['data-sitekey'] //returns undefined

... später herausfinden, dass der Zugriff auf Datenattribute anders ist: Es sollte so sein:

var api = document.getElementById("some-api");
api.dataset.sitekey

Hoffe das hilft!