ハイフンを含むJavaScriptオブジェクトプロパティを参照するにはどうすればよいですか？

このスクリプトを使用して、継承されたすべてのetcスタイルのスタイルオブジェクトを作成します。

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

次のようにすると、最初のアラートは正常に機能しますが、2番目のアラートは機能しません-。文字列ではないので、引用符で囲むことはできません。それでは、このオブジェクトプロパティをどのように使用しますか？

編集する

コメントを見ると、CSSプロパティのキー表記は多くのプロパティと互換性がないことがわかります。キャメルケースのキー表記を使用することが現在の方法です

obj.style-attr // would become 

obj["styleAttr"]

ドットではなくキー表記を使用する

style["text-align"]

jsのすべての配列はオブジェクトであり、すべてのオブジェクトは連想配列です。つまり、配列のキーを参照するのと同じように、オブジェクトの場所を参照できます。

arr[0]

またはオブジェクト

obj["method"] == obj.method

この方法でプロパティにアクセスするときに覚えておくべきこと

1. それらは評価されるので、カウンターで何かを行ったり動的メソッド名を使用したりしない限り、文字列を使用します。

   つまり、obj [method]は未定義のエラーを生成しますが、obj ["method"]は生成しません。

2. js変数で許可されていない文字を使用している場合は、この表記を使用する必要があります。

この正規表現はほとんどそれを要約します

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

を含むCSSプロパティは、-JavaScriptオブジェクトのcamelCaseで表されます。それは：

alert( style.textAlign );

ブラケット表記を使用して文字列を使用することもできます。

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

プロパティ名には、文字、数字、よく知られた$記号、および_（pimvdbに感謝）のみを含めることができます。

元の質問に対する答えは、プロパティ名を引用符で囲み、配列スタイルのインデックスを使用することです。

obj['property-with-hyphens'];

関心のあるプロパティはCSSプロパティであると指摘する人もいます。ハイフンを含むCSSプロパティは、自動的にラクダの大文字に変換されます。その場合は、次のようなキャメルケース名を使用できます。

style.textAlign;

ただし、このソリューションはCSSプロパティでのみ機能します。例えば、

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

角かっこを使用します。

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

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

オブジェクトの詳細：MDN

注：スタイルオブジェクトCSSStyleDeclarationにアクセスしている場合、JavaScriptからアクセスするには、キャメルケースを使用する必要があります。詳細はこちら

alert(style.textAlign)

または

alert(style["textAlign"]);

質問に直接答えるにはstyle['text-align']、ハイフンを含むプロパティをどのように参照するかです。ただし、この場合はstyle.textAlign（またはstyle['textAlign']）を使用する必要があります。

ハイフン付きのスタイルプロパティは、JavaScriptのcamelCaseを介して参照されるため、を使用してくださいstyle.textAlign。

問題を解決するには：この問題を回避するために、キャメルケースでは、ハイフンが含まれるCSSプロパティがJavaScriptプロパティで表されます。あなたが欲しい：style.textAlign。

質問に答えるには、角かっこ表記を使用します。これobj.propは、obj["prop"]文字列を使用してプロパティ名にアクセスしたり、識別子で禁止されている文字を使用したりできるのと同じです。

オブジェクトのプロパティ名は、CSS名と1対1で一致していません。

CSSスタイルの場合、JavascriptでcamelCaseに変更されるので、にtest-alignなると思いますtextAlign。非標準文字を含むプロパティにアクセスする一般的なケースでは、配列スタイルを使用します。 ['text-align']

最初に、なぜ私の解決策が私の側でうまくいかなかったのかと思います

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

...後でデータ属性へのアクセスが異なることを理解する：それは次のようになるはずです：

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

お役に立てれば！