Come faccio a fare riferimento a una proprietà di un oggetto javascript con un trattino al suo interno?

Utilizzando questo script per creare un oggetto di stile di tutti gli stili ereditati ecc.

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

con quanto segue, il primo avviso funzionerà bene, ma il secondo no .. sta interpretando il -come un segno meno presumo .. il debugger dice "errore di riferimento non rilevato". Non posso racchiudere le virgolette, però, perché non è una stringa. Allora come si usa questa proprietà dell'oggetto?

MODIFICARE

Guardando i commenti vedrai che per le proprietà css la notazione della chiave non è compatibile con un certo numero di proprietà. L'uso della notazione della chiave delle maiuscole è quindi il modo corrente

obj.style-attr // would become 

obj["styleAttr"]

Usa la notazione chiave invece del punto

style["text-align"]

Tutti gli array in js sono oggetti e tutti gli oggetti sono solo array associativi, questo significa che puoi fare riferimento a una posizione in un oggetto proprio come faresti con una chiave in un array.

arr[0]

o l'oggetto

obj["method"] == obj.method

un paio di cose da ricordare quando si accede alle proprietà in questo modo

1. vengono valutati quindi usa le stringhe a meno che tu non stia facendo qualcosa con un contatore o usando nomi di metodi dinamici.

   questo significa che obj [metodo] ti darebbe un errore indefinito mentre obj ["metodo"] no

2. È necessario utilizzare questa notazione se si utilizzano caratteri non consentiti nelle variabili js.

Questa regex lo riassume praticamente

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

Le proprietà CSS con una -sono rappresentate in camelCase negli oggetti Javascript. Sarebbe:

alert( style.textAlign );

Puoi anche usare una notazione tra parentesi per usare la stringa:

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

I nomi delle proprietà possono contenere solo caratteri, numeri, il $segno ben noto e _(grazie a pimvdb).

La risposta alla domanda originale è: inserire il nome della proprietà tra virgolette e utilizzare l'indicizzazione in stile array:

obj['property-with-hyphens'];

Molti hanno sottolineato che la proprietà che ti interessa è una proprietà CSS. Le proprietà CSS che hanno trattini vengono automaticamente convertite in maiuscolo. In tal caso puoi usare il nome in cammello come:

style.textAlign;

Tuttavia questa soluzione funziona solo per le proprietà CSS. Per esempio,

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

Usa parentesi:

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

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

Maggiori informazioni sugli oggetti: MDN

NOTA: se stai accedendo all'oggetto di stile , CSSStyleDeclaration , usa must camelCase per accedervi da javascript. Maggiori info qui

alert(style.textAlign)

o

alert(style["textAlign"]);

Per rispondere direttamente alla domanda: style['text-align']è come faresti riferimento a una proprietà con un trattino al suo interno. Ma style.textAlign(o style['textAlign']) è ciò che dovrebbe essere usato in questo caso.

Le proprietà di stile con trattini sono referenziate tramite camelCase in JavaScript , quindi usa style.textAlign.

Per risolvere il tuo problema : le proprietà CSS con trattini sono rappresentate da proprietà JavaScript in camelCase per evitare questo problema. Si desidera: style.textAlign.

Per rispondere alla domanda : Usa la notazione tra parentesi quadre : obj.propè la stessa di obj["prop"]così puoi accedere ai nomi delle proprietà usando stringhe e usare caratteri che sono vietati negli identificatori.

I nomi delle proprietà degli oggetti non sono corrispondenze uno a uno per i nomi css.

Penso che nel caso degli stili CSS vengano modificati in camelCase in Javascript così test-aligndiventa textAlign. Nel caso generale in cui si desidera accedere a una proprietà che contiene caratteri non standard, si utilizza lo stile array. ['text-align']

All'inizio, mi chiedo perché la soluzione non abbia funzionato da parte mia

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

... in seguito scopri che l'accesso agli attributi dei dati è diverso: dovrebbe essere così:

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

Spero che questo ti aiuti!