web-dev-qa-db-ja.com

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

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

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

次の場合、最初のアラートは正常に機能しますが、2番目のアラートは機能しません。...-マイナスとして私は推測します。デバッガーは「不明な参照エラー」と言います。ただし、文字列ではないため、引用符で囲むことはできません。それでは、このオブジェクトプロパティをどのように使用すればよいですか？

javascriptproperties
93
Damon

[〜＃〜] edit [〜＃〜]

コメントを見ると、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_$]*
129
austinbv

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

alert( style.textAlign );

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

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

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

16
jAndy

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

obj['property-with-hyphens'];

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

style.textAlign;

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

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

ブラケットを使用します。

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

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

オブジェクトの詳細： [〜＃〜] mdn [〜＃〜]

注： style オブジェクト、 CSSStyleDeclaration にアクセスする場合、javascriptからアクセスするにはcamelCaseを使用する必要があります。詳細 こちら

6
Joe
alert(style.textAlign)

または

alert(style["textAlign"]);
4
Brian

質問に直接回答するには：style['text-align']は、ハイフンを含むプロパティを参照する方法です。しかし、style.textAlign （または style['textAlign']）は、この場合に使用すべきものです。

3
Dawson Toth

ハイフネーションされたスタイルプロパティは JavaScriptのcamelCaseで参照 であるため、style.textAlignを使用します。

3
Jonny Buchanan

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

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

3
Quentin

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

2
Doug Chamberlain

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

2
GordonM