2012-05-16 84 views
5

我想使用jQuery css()函數動態地設置div元素的css,而不是使用css()函數的字符串文字/字符串常量。可能嗎?是否有可能將變量傳遞給jQuery的css函數?

而不是使用下面的代碼與字符串文字:

$('#myDiv').css('color', '#00ff00'); 

我想用變量來設置的CSS #myDiv元素像

版本1:

var propertyName = get_propery_name(myVariable1); // function get_propery_name() returns a string like 'background-color' 
var value = get_value(myVariable2) ; // function get_value() returns a string like '#00ff00' 
$('#myDiv').css(propertyName, value); 

版本2 :(只是硬編碼,看看他們是否工作,而不需要調用上述版本1的自定義函數):

var propertyName = 'background-color'; 
var value = '#00ff00'; 
$('#divLeftReportView').css(propertyName, value); 

代碼的兩個變量版本都不起作用。請幫忙。謝謝。

+1

沒有什麼特別的了。這兩個變種應該工作得很好:http://jsfiddle.net/UQWyH/ – VisioN

+0

它是如何工作的? – jrummell

+0

這是否回答了您的問題?如果其中一位幫助你,請接受答案 –

回答

1

你在這裏發佈的代碼應該可以工作。我已經完成了幾次你想要做的幾個版本。如果它不工作,那麼很可能在JavaScript的其他地方發生了某些錯誤,或者您沒有爲要更改的元素提供正確的選擇器/ ID。

嘗試在$('#divLeftReportView').css(propertyName, value);之後立即加上alert("test");。如果你彈出「測試」的問題,那麼問題出在你的選擇器上。如果沒有,那麼問題是你的JavaScript中的錯誤。

也嘗試在相同的地方添加$('#divLeftReportView').css("background-color", "#00ff00");。這將確認選擇器是否工作。

+0

謝謝。我發現問題是我使用大寫的屬性名稱像BACKGOUND-COLOR的jQuery css()方法,所以我的代碼不能用於$('#divLeftReportView')。css(「BACKGOUND-COLOR」,「#00ff00」);事實證明,屬性名稱必須是小寫。所以,代碼應該是$('#divLeftReportView')。css(「background-color」,「#00ff00」); – user1219702

1

似乎在http://jsfiddle.net/gaby/6wHtW/

做工精細請確保您的DOM ready事件後運行代碼..

$(function(){ 
    var propertyName = 'background-color'; 
    var value = '#00ff00'; 
    $('#divLeftReportView').css(propertyName, value); 
}); 

否則你的元素可能不會出現在DOM ..

+0

如果'value'變量的值是從輸入文本框(用戶輸入)獲得的,如:var value = $('#myTextBox')。val(); ?我的意思是如何將'value'變量的值轉換爲字符串常量或字符串常量? – user1219702

+0

因爲它是一個字符串,它將按原樣工作......無論你傳遞一個字符串字面量還是一個持有字符串的變量,它都是一樣的。 –

2

你的兩個例子都能正常工作。我建議只是有點更簡潔的方法(個人喜好的語法):

$(document).ready(function() { 
    $('#myDiv').css(get_propery_name(myVariable1), get_value(myVariable2)); 
} 

這裏的a working fiddle

如果你想採取了一步,你可以返回一個CSS的地圖,而不是字符串:

$('#divLeftReportView').css(GetCssMap("foo")); 

function GetCssMap(mapIdentifier) { 
    return { "background-color" : "#00ff00" } 
} 

這裏的a working fiddle

0

還可以將一個變量中傳遞多個CSS參數數組:

$(function(){ 
    var divStyle = {'background-color': '#00ff00', 'color': '#000000'} 
    $('#divID').css(divStyle); 
});