2011-08-19 11 views
70

this scriptを使用して、継承されたすべてのスタイルのスタイルオブジェクトを作成します。javascriptオブジェクトのプロパティをハイフンで参照するにはどうすればよいですか?

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

以下で、最初の警告が正常に動作しますが、もう一つは...それは私が前提とマイナスとして-を解釈していますしない...デバッガは「キャッチされない参照エラー」と言います。しかし、文字列ではないので、引用符を付けることはできません。では、このオブジェクトプロパティはどのように使用しますか?

答えて

89

EDIT

ルック。現在の方法である

obj.style-attr // would become 

obj["styleAttr"] 

使用キー表記はなく、ドット は、この手段JSのすべての配列はオブジェクトであり、すべてのオブジェクトは単なる連想配列であり、従ってキャメルケースキー表記を

style["text-align"] 

使用します配列内のキーを参照するのと同じように、オブジェクト内の場所を参照することができます。

arr[0] 

またはオブジェクト

obj["method"] == obj.method 

アクセスプロパティに

  1. をこの方法を覚えているカップルの事、彼らはあなたがカウンターで何かをやったり使用していない限り、文字列を使用して評価しています動的メソッド名。あなたがjsの変数で許可されていない文字を使用している場合、OBJ [「方法」は]あなたはこの表記を使用する必要がありますない

  2. ながら

    これがobj [方法]を意味

    はあなたに未定義のエラー を与えるだろう。直接質問に答えるために

この正規表現はかなり和が、それはアップ

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

キーの表記法はここには適用されません - cssはキーの中にラクダのケースを使用してスタイルを定義します:http://jsfiddle.net/49vkD/ – Brian

+1

@brianは私のために4回すべて働いた – austinbv

+0

どのブラウザ? IE7、IE8、FFX 3.5にハイフンで私が失敗するそして、失敗によって私はそれらの両方のための "未定義"を表示することを意味する... – Brian

5

使用ブラケット:オブジェクト上の

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

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

さらに詳しい情報:MDN

注:styleオブジェクト、CSSStyleDeclarationにアクセスしている場合は、使用には、JavaScriptからアクセスするキャメルケースなければなりません。あなたはCSSプロパティのキーの表記は、プロパティの数と互換性がないことがわかりますコメントではより多くの情報here

+0

http://jsfiddle.net/49vkD/ - CSSスタイルの項目のハイフンなし - ラクダケースを使用します。 – Brian

+1

あなたは私を魅了していません - あなたはこの質問に対する他の多くのレスポンダーによってw3c標準を訴えています:http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Propertiesしかし、同じものをupvoted ... – Brian

+0

**このコードを使用しないでください。**ラクダのケースではなく、CSSのプロパティはクロスブラウザです。ラクダの代わりにハイフンを使用するのは標準ではないため、動作しません。 – Oriol

2

style['text-align']は、あなたがそれでハイフンを持つプロパティを参照する方法をです。しかし、この場合にはstyle.textAlign(またはstyle['textAlign'])を使用する必要があります。

+0

http://jsfiddle.net/49vkD/ - ハイフンなし - キャメルケース – Brian

+0

**これは使用しないでください** CSSのプロパティはラクダになりますあなたのコードはいくつかのブラウザでは動作するかもしれませんが標準ではありません – Oriol

+0

キャメルケースを使用するように調整されました –

15

-のCSSプロパティは、JavascriptオブジェクトのcamelCaseで表されます。それは次のようになります。

alert(style.textAlign); 

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

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

プロパティ名は、文字、数字、よく知られて$記号と_(おかげでを含むことができ pimvdb)。

+1

'_ 'も許可されています。 – pimvdb

+0

後者は動作します...私が逃したシンタックスの事の一つです。私が参照したスクリプトは、通常のCSSスタイル名を使用しますが、それでも知っておくと便利です! – Damon

+0

プロパティ名は数字で始めることはできませんが、 – austinbv

2

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

12

元の質問への答えは次のとおりです。引用符で場所プロパティ名を、配列形式のインデックスを使用します。

obj['property-with-hyphens']; 

いくつかに興味がありますプロパティは、CSSプロパティであることを指摘しています。ハイフンを含むCSSプロパティは自動的にラクダケーシングに変換されます。しかし、この解決策は唯一のCSSプロパティのために働く

style.textAlign; 

:その場合、あなたは次のようにラクダ同棲名を使用することができます。例えば、

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

キャメルケースを使用するように修正されました:http://jsfiddle.net/49vkD/ – Brian

+0

@BrianあなたはCSSのプロパティが正しいです。しかし、私は元の一般的な質問に答えていました。「javascriptオブジェクトのプロパティをハイフンで参照するにはどうすればよいですか?ここにあなたのjsfiddleの更新版があります:http://jsfiddle.net/49vkD/1/ – Stoney

+0

実際に私は自分の答えの範囲を狭めました。問題はもう少しオープンで終わったので、私の下院議員を削除しました。 – Brian

3

はあなたの問題を解決するため:それらでハイフンを持つCSSプロパティは、この問題を回避するためにrepresented by JavaScript properties in camelCaseです。あなたは欲しい:style.textAlign。使用square bracket notation:質問答えるために

obj.propので、あなたが文字列を使用してプロパティ名にアクセスし、識別子で禁止されている文字を使用することができますobj["prop"]と同じです。

3
alert(style.textAlign) 

または

alert(style["textAlign"]); 
+0

+1、キャメルケースを指摘してくれてありがとう – Joe

2

私は、CSSスタイルの場合には、彼らがそのようにtest-aligntextAlignなっJavaScriptでキャメルケースに変更されますと思います。非標準文字を含むプロパティにアクセスする一般的なケースでは、配列スタイルを使用します。まず['text-align']

-1

ソリューションは、私の最後に

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

を動作しなかった理由を、私は後でデータ属性アクセスが異なっていることが図外に...不思議: それは次のようにする必要があります:

​​

関連する問題