Question

我想使用jQuery css（）函数动态设置div元素的css，而不是使用css（）函数的字符串文字/字符串常量。有可能吗？

不使用以下代码和字符串文字：

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

我想使用变量为#myDiv元素设置css，如

版本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);

两个变量版本的代码都不起作用。请帮忙。感谢。

Answer 1

你的两个例子都可以正常使用。我建议稍微简洁一些（个人语法偏好）：

$(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。

Answer 2

您在此处发布的代码应该有效。我已经完成了你想做几次的两个版本。如果它不起作用，很可能在你的javascript中的其他地方出现问题，或者你没有正确的选择器/ id用于你想要改变的元素。

尝试在alert("test");之后立即添加$('#divLeftReportView').css(propertyName, value);。如果弹出窗口显示“test”，则问题出在选择器上。如果没有，那么问题就是你的javascript中的错误。

还可以尝试在同一个地方添加$('#divLeftReportView').css("background-color", "#00ff00");。这将确认选择器是否正常工作。

Answer 3

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

工作正常

确保在DOM ready事件后运行代码..

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

否则您的元素可能不会出现在DOM中..

Answer 4

您还可以将一个变量中的多个CSS参数作为数组传递：

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

Answer 5

是的，使用 jQuery attr 方法可以动态更改 css

var height=$(".sampleClass1").innerHeight();
$('.sammpleClass2').attr('style', 'min-height:'+height+' !important');

是否可以将变量传递给jquery的css函数？

5 个答案: