如何使用連字符引用JavaScript對象屬性？

使用this script創建所有繼承的等樣式的樣式對象。如何使用連字符引用JavaScript對象屬性？

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

與以下，第一次警報將正常工作，但第二個不..它解釋-爲負我想..調試器說「未捕獲引用錯誤」。儘管如此，我無法引用它，因爲它不是一個字符串。那麼如何使用這個對象屬性？

來源

2011-08-19 Damon

編輯

看評論，你會看到，CSS屬性關鍵符號是不是有一些屬性兼容。使用因此駱駝情況下鍵符號是當前的方式

obj.style-attr // would become 

obj["styleAttr"]

使用鍵符號，而不是點

style["text-align"]

所有的數組在JS都是對象，所有的對象都只是關聯數組，這個手段您可以像引用數組中的鍵一樣引用對象中的某個位置。

arr[0]

或對象

obj["method"] == obj.method

有兩件事情訪問屬性時這樣

他們進行評估，以便使用字符串，除非你正在做的事情有一個櫃檯或使用記動態方法名稱。

這意味着OBJ [方法]會給你一個未定義的錯誤而OBJ [「方法」]不會
必須，如果你使用的是未在JS變量允許的字符使用這個符號。

此正則表達式幾乎總結起來

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

來源

2011-08-19 13:54:35 austinbv

這裏的關鍵表示法不適用 - css在關鍵字中使用駱駝大小寫定義樣式：http://jsfiddle.net/49vkD/ – Brian

@brian爲我工作了4次 – austinbv

什麼瀏覽器？在連字符上失敗的是IE7，IE8，FFX 3.5。而且，由於失敗，我的意思是顯示「未定義」的這兩個...... – Brian

使用括號：在對象上

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

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

更多信息：MDN

注：如果您正在訪問的style對象，CSSStyleDeclaration，使用時必須駝峯從JavaScript訪問它。更多信息here

來源

2011-08-19 13:54:34 Joe

http://jsfiddle.net/49vkD/ - css風格項目沒有連字符 - 使用駱駝案例。 – Brian

你並沒有安撫我 - 你正在安撫W3C標準，對於這個問題的許多其他響應者：http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties ，但upvoted只是相同的...... – Brian

**不要使用這段代碼**這不是說駱駝套CSS屬性是更多的跨瀏覽器，這是使用連字符，而不是駱駝大小寫不是標準的，不應該工作。 – Oriol

要直接回答這個問題：style['text-align']是你將如何引用屬性與它連字符。但style.textAlign（或style['textAlign']）是應該在這種情況下使用。

來源

2011-08-19 13:54:35

http://jsfiddle.net/49vkD/ - 沒有連字符 - camelCase – Brian

**不要使用這個** CSS屬性是駝峯式的你的代碼可能在某些瀏覽器上工作但不是標準 – Oriol

調整使用駱駝案例 –

帶有-的CSS屬性在Javascript對象的camelCase中表示。這將是：

alert(style.textAlign);

你也可以使用一個支架符號使用的字符串：

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

屬性名稱只能包含字符，數字，著名$符號和_（感謝pimvdb）。

來源

2011-08-19 13:54:37 jAndy

' '也是允許的。 – pimvdb

後者的作品..這些合成的東西之一，我錯過了。我引用的腳本使用常規的css樣式名稱，但仍然有用於瞭解！ – Damon

屬性名稱不能以數字開頭 – austinbv

對象屬性名稱不是一對一匹配的CSS名稱。

來源

2011-08-19 13:54:51

聯體風格的屬性是referenced via camelCase in JavaScript，所以使用style.textAlign。

來源

2011-08-19 13:55:02

的答案，原來的問題是：在報價的地方屬性名，並使用數組風格索引：

obj['property-with-hyphens'];

一些人士指出，你所感興趣的屬性是CSS屬性。具有連字符的CSS屬性會自動轉換爲駱駝套管。在這種情況下，您可以使用駝峯名稱，例如：

style.textAlign;

但是，此解決方案僅適用於CSS屬性。例如，

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

來源

2011-08-19 13:55:22 Stoney

修復使用駱駝案例：http://jsfiddle.net/49vkD/ – Brian

@Brian你是正確的CSS屬性。但是，我回答了原始的一般問題「我如何使用連字符引用JavaScript對象屬性？」下面是你的jsfiddle的更新版本：http://jsfiddle.net/49vkD/1/ – Stoney

的確，我自己縮小了答案的範圍 - 我假定OP指的是特定的樣式對象。由於問題比這個問題更開放，我放棄了我的反對票。 – Brian

解決您的問題：在用連字符的CSS屬性包括represented by JavaScript properties in camelCase避免這個問題。你想要：style.textAlign。

要回答這個問題：使用square bracket notation：obj.prop相同obj["prop"]這樣你就可以訪問使用字符串屬性名稱和使用在標識禁止的字符。

來源

2011-08-19 13:55:41 Quentin

alert(style.textAlign)

或

alert(style["textAlign"]);

來源

2011-08-19 13:55:51 Brian

+1，謝謝指出camelCase – Joe

我認爲他們得到改變，以駝峯在Javascript所以test-align成爲textAlign CSS樣式的情況。在一般情況下，您想要訪問包含非標準字符的屬性時，請使用數組樣式。 ['text-align']

來源

2011-08-19 13:55:58 GordonM

-1

起初，我不知道爲什麼該解決方案並沒有在我結束

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

工作...後來弄明白是存取數據屬性是不同的：它應該是這樣的：

希望這會有所幫助！

來源

2015-07-13 14:00:55 Woppi

如何使用連字符引用JavaScript對象屬性？

回答

相關問題