Come faccio a fare riferimento a una proprietà dell’object javascript con un trattino?

Usando questo script per creare un object stile di tutti gli stili etc ereditati.

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

con il seguente, il primo avviso funzionerà bene, ma il secondo no … interpreterà il - come presumo meno .. il debugger dice ‘errore di riferimento non rilevato’. Non riesco a mettere le virgolette intorno, però, perché non è una stringa. Quindi, come posso usare questa proprietà dell’object?

MODIFICARE

Guardate i commenti vedrete che per la notazione delle chiavi di proprietà CSS non è compatibile con un numero di proprietà. L’uso della notazione chiave del caso cammello è quindi il modo corrente

 obj.style-attr // would become obj["styleAttr"] 

Utilizzare la notazione chiave anziché il 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 un posto in un object proprio come faresti riferimento a una chiave in un array.

 arr[0] 

o l’object

 obj["method"] == obj.method 

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

  1. vengono valutati in modo da utilizzare le stringhe a meno che non si stia facendo qualcosa con un contatore o utilizzando nomi di metodi dinamici.

    questo significa che obj [metodo] ti darebbe un errore indefinito mentre obj [“metodo”] non lo farebbe

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

Questo regex praticamente riassume

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

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

 alert( style.textAlign ); 

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

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

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

La risposta alla domanda originale è: posiziona il nome della proprietà tra virgolette e usa l’indicizzazione dello stile dell’array:

 obj['property-with-hyphens']; 

Molti hanno sottolineato che la proprietà che ti interessa è una proprietà CSS. Le proprietà CSS con trattini vengono automaticamente convertite in custodia cammello. In questo caso puoi usare il nome del 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["ab"] === 1); // true 

Ulteriori informazioni sugli oggetti: MDN

NOTA: se si accede all’object style , CSSStyleDeclaration , utilizzare camelCase per accedervi da javascript. Maggiori informazioni qui

Le proprietà di stile sillabate vengono referenziate tramite camelCase in JavaScript , quindi usa style.textAlign .

Per risolvere il tuo problema : le proprietà CSS con trattini in esse sono rappresentate dalle proprietà JavaScript in camelCase per evitare questo problema. Vuoi: style.textAlign .

Per rispondere alla domanda : Usa notazione parentesi quadra : obj.prop è uguale a obj["prop"] modo da poter accedere ai nomi delle proprietà usando stringhe e usare caratteri vietati negli identificatori.

 alert(style.textAlign) 

o

 alert(style["textAlign"]); 

Per rispondere direttamente alla domanda: style['text-align'] è il modo in cui si farebbe riferimento a una proprietà con un trattino in essa. Ma style.textAlign (o style['textAlign'] ) è ciò che dovrebbe essere usato in questo caso.

I nomi delle proprietà dell’object non sono corrispondenze one-to-one per i nomi css.

Penso che nel caso degli stili CSS vengano modificati in CamelCase in Javascript, in modo che test-align diventi 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 ha funzionato sulla mia estremità

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

… in seguito capirai 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!