如何在JQuery中設置CSS屬性時使用變量？

我試圖讓下面的工作：如何在JQuery中設置CSS屬性時使用變量？

var $marPad = $('#wrapper').attr('id') == "overthrow" ? 
     ["margin-top", "margin-bottom"] : ["padding-top", "padding-bottom"]; 

$("#toBeSet").css({ 
    $marPad[0] : "100px", 
    $marPad[1] : "100px" 
    })

這樣，我希望只有一個CSS二傳手度日。然而，Firebug總是告訴我，我無法制作像這樣的$ marPad [0]的CSS選擇器。它總是返回缺少：屬性編號爲。

有人可以告訴我我做錯了什麼，如果有可能也使用變量，而不是固定的CSS選擇器？

感謝您的幫助！

來源

2012-04-11 frequent

糾正我，如果我錯了，但'$（「＃包裝」）ATTR（「身份證」）==「推翻」'永遠的回報。假，因爲你是通過ID選擇一個元素並檢查它是否是I D是不是。所以'$ marPad'將始終等於'[「padding-top」，「padding-bottom」]'。 – Jasper 2012-04-11 22:22:36

@jasper - 正確。我只是爲了解決這個問題。我正在檢查自定義的jqm-data屬性，該屬性工作正常。 thx指出雖然！ – frequent 2012-04-12 05:36:54

您需要先創建對象，然後將屬性添加到它。

var obj = {}; 

obj[$marPad[0]] = '100px'; 
obj[$marPad[1]] = '100px'; 

$("#toBeSet").css(obj);

也許更好的方式是使其在首位的條件語句的一部分......

var $marPad = $('#wrapper').attr('id') == "overthrow" ? 
     {marginTop:'100px', marginBottom: '100px'} : {paddingTop:'100px', paddingBottom:'100px'}; 

$("#toBeSet").css($marPad);

來源

2012-04-11 21:45:46

都很好。第二個解決方案只看起來更好。我原來的代碼稍微複雜一些，所以我傾向於第一個版本 – frequent 2012-04-11 21:51:57

嘗試：

$("#toBeSet").css($marPad[0], "100px").css($marPad[1], "100px");

來源

2012-04-11 21:45:29 hamczu

這個工作。任何想法如何將多個元素添加到CSS規則中？ – frequent 2012-04-11 21:48:19

我認爲這個問題圍繞着這個問題的真正問題：爲什麼語法的行爲不如預期？ – nickf 2012-04-11 21:53:24

我認爲它的行爲像預期的那樣，其他答案中有一些很好的補充 - 以這種方式定義對象時，鍵必須是字符串（可以不帶引號 - 這與JSON對象不同）。 – hamczu 2012-04-11 22:29:52

對象中的文字不能使用變量名。創建對象並將屬性添加到它：

var o = {}; 
o[$marPad[0]] = "100px"; 
o[$marPad[1]] = "100px"; 

$("#toBeSet").css(o)

來源

2012-04-11 21:46:41 Guffa

，這是一個很好的做法！謝謝！ – frequent 2012-04-11 21:49:23

key部分對象文字定義不計算。也就是說，你不能做這樣的事情：

x = { 
    1 + 1: 'foo' 
};

即使你並不總是需要報價，左手側被視爲一個字符串標識符。那麼它遵循變量不被評估：

foo = 'bar'; 
x = { 
    foo: 'my value' 
} 
x.bar === undefined; 
x.foo === 'my value';

計算表達式的唯一方法是使用方括號標記：

foo = 'bar'; 
x = {}; // an empty object 
x[foo] = 'my value'; // <-- foo is evaluated, returns the string value 'bar' 

x.bar === 'my value'; 
x.foo === undefined; 

// and to clarify: 
x['foo'] === undefined; 
x[foo] === 'my value'

因此，要直接回答你的問題，因爲@am不是我什麼說，你應該做這樣的事情：

obj = {}; 
obj[$marPad[0]] = "100px"; 
obj[$marPad[1]] = "100px"; 
$('#toBeSet').css(obj);

來源

2012-04-11 21:52:32 nickf

+1尼斯徹底的解釋。 – 2012-04-11 21:54:25

從我這裏+1！ – frequent 2012-04-11 21:54:48

如何在JQuery中設置CSS屬性時使用變量？

回答

相關問題