Come faccio a fare riferimento a una proprietà dell'oggetto javascript con un trattino?

Question

Utilizzare this script per creare un oggetto stile di tutti gli stili ecc. Ereditati.

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

con la seguente, il primo avviso funziona bene, ma il secondo non lo fa .. E 'l'interpretazione della - come meno presumo .. il debugger dice 'errore di riferimento non rilevata'. Non riesco a mettere le virgolette intorno, però, perché non è una stringa. Quindi, come posso usare questa proprietà dell'oggetto?

Answer 1

modificare più

un'occhiata ai commenti si vedrà che per le proprietà CSS notazione chiave non è compatibile con una serie di proprietà. Usando la notazione chiave caso cammello quindi è il modo attuale

obj.style-attr // would become 

obj["styleAttr"] 

---

Usa notazione chiave anziché dot

style["text-align"] 

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

arr[0] 

o l'oggetto

obj["method"] == obj.method 

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

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

   questo significa obj [metodo] darebbe un errore non definito mentre obj [ "metodo"] non

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

Questa espressione regolare praticamente lo riassume

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

Answer 2

Utilizzare staffe:

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

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

Più informazioni su oggetti: MDN

NOTA: Se si accede al style oggetto, CSSStyleDeclaration, l'uso deve camelCase di accedervi da JavaScript. Informazioni here

Answer 3

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

Answer 4

Le proprietà CSS con un - sono rappresentate in camelCase negli oggetti Javascript.Che sarebbe:

alert(style.textAlign); 

Si potrebbe anche usare una notazione staffa per utilizzare la stringa:

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

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

Answer 5

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

Answer 6

Le proprietà di stile sillabato sono referenced via camelCase in JavaScript, quindi utilizzare style.textAlign.

Answer 7

La risposta alla domanda iniziale è: posto il nome della proprietà tra virgolette e utilizzare lo stile di matrice indicizzazione:

obj['property-with-hyphens']; 

Diversi hanno sottolineato che la proprietà siete interessati a è 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 con le proprietà CSS. Ad esempio,

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

Answer 8

per risolvere il problema: Le proprietà CSS con trattini in essi sono represented by JavaScript properties in camelCase per evitare questo problema. Vuoi: style.textAlign.

di rispondere alla domanda: Uso square bracket notation: obj.prop è lo stesso obj["prop"] in modo da poter accedere a nomi di proprietà che utilizzano stringhe e utilizzare i caratteri che sono proibite in identificatori.

Answer 9

alert(style.textAlign) 

o

alert(style["textAlign"]); 

Answer 10

penso che nel caso di stili CSS ottengono cambiato a camelCase in Javascript in modo test-align diventa textAlign. Nel caso generale in cui si desidera accedere a una proprietà che contiene caratteri non standard, si utilizza lo stile array. ['text-align']

Answer 11

In un primo momento, mi chiedo perché la soluzione non ha funzionato sul mio fine

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

... in seguito dato che l'accesso ai dati attributi è diverso: Dovrebbe essere come questo:

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

Spero che questo aiuti!