Jak odwołać się do właściwości obiektu javascript z łącznikiem?

Użycie tego skryptu do utworzenia obiektu stylu ze wszystkich odziedziczonych stylów itp.

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

z poniższym, pierwszy alert będzie działał dobrze, ale drugi nie. -Zakładam, że interpretuje jako minus .. debugger mówi „nieprzechwycony błąd odniesienia”. Nie mogę jednak umieszczać go w cudzysłowie, ponieważ nie jest to ciąg. Jak więc używać tej właściwości obiektu?

EDYTOWAĆ

Spójrz na komentarze, które zobaczysz, że w przypadku właściwości CSS notacja klucza nie jest zgodna z wieloma właściwościami. Dlatego obecnie stosuje się notację klucza w przypadku wielbłąda

obj.style-attr // would become 

obj["styleAttr"]

Użyj notacji klawiszy zamiast kropki

style["text-align"]

Wszystkie tablice w js są obiektami, a wszystkie obiekty są po prostu tablicami asocjacyjnymi, co oznacza, że ​​możesz odwoływać się do miejsca w obiekcie, tak jak odnosisz się do klucza w tablicy.

arr[0]

lub obiekt

obj["method"] == obj.method

kilka rzeczy, o których należy pamiętać podczas uzyskiwania dostępu do właściwości w ten sposób

1. są one oceniane, więc używaj łańcuchów, chyba że robisz coś z licznikiem lub używasz dynamicznych nazw metod.

   oznacza to, że obj [metoda] dałoby nieokreślony błąd, podczas gdy obj ["metoda"] nie

2. Musisz użyć tej notacji, jeśli używasz znaków, które nie są dozwolone w zmiennych js.

To wyrażenie regularne prawie to podsumowuje

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

Właściwości CSS z a -są reprezentowane w camelCase w obiektach Javascript. To byłoby:

alert( style.textAlign );

Możesz również użyć notacji nawiasów, aby użyć ciągu:

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

Nazwy nieruchomości mogą zawierać tylko znaki, cyfry, dobrze znany $znak i _(dzięki pimvdb).

Odpowiedź na pierwotne pytanie brzmi: umieść nazwę właściwości w cudzysłowie i użyj indeksowania w stylu tablicy:

obj['property-with-hyphens'];

Kilka osób zwróciło uwagę, że interesująca Cię właściwość to właściwość CSS. Właściwości CSS zawierające łączniki są automatycznie konwertowane na łuskę wielbłąda. W takim przypadku możesz użyć nazwy w postaci wielbłąda, takiej jak:

style.textAlign;

Jednak to rozwiązanie działa tylko dla właściwości CSS. Na przykład,

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

Użyj nawiasów:

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

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

Więcej informacji o obiektach: MDN

UWAGA: Jeśli uzyskujesz dostęp do obiektu stylu , CSSStyleDeclaration , użyj must camelCase, aby uzyskać do niego dostęp z poziomu javascript. Więcej informacji tutaj

alert(style.textAlign)

lub

alert(style["textAlign"]);

Odpowiadając bezpośrednio na pytanie: style['text-align']jak odnosić się do właściwości z łącznikiem. Ale style.textAlign(lub style['textAlign']) jest tym, co powinno być używane w tym przypadku.

Odwołania do właściwości stylu z łącznikami są dostępne za pośrednictwem camelCase w JavaScript , więc użyj style.textAlign.

Aby rozwiązać problem : właściwości CSS zawierające myślniki są reprezentowane przez właściwości JavaScript w camelCase, aby uniknąć tego problemu. Chcesz: style.textAlign.

Aby odpowiedzieć na pytanie : Użyj notacji z nawiasami kwadratowymi : obj.propto to samo obj["prop"], co w przypadku dostępu do nazw właściwości za pomocą łańcuchów i używania znaków, które są zabronione w identyfikatorach.

Nazwy właściwości obiektów nie są dopasowaniami jeden do jednego dla nazw CSS.

Myślę, że w przypadku stylów CSS oni się przebrać do CamelCase w JavaScript więc test-alignstaje textAlign. W ogólnym przypadku, gdy chcesz uzyskać dostęp do właściwości zawierającej niestandardowe znaki, używasz stylu tablicowego. ['text-align']

Na początku zastanawiam się, dlaczego rozwiązanie nie zadziałało z mojej strony

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

... później przekonaj się, że dostęp do atrybutów danych przebiega inaczej: powinno wyglądać tak:

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

Mam nadzieję że to pomoże!