6

我想使用 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);

两种可变版本的代码都不起作用。请帮忙。谢谢。

4

5 回答 5

2

您的两个示例都可以正常工作。我建议使用更简洁的方法（个人语法偏好）：

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

这是一个工作小提琴。

如果你想更进一步，你可以返回一个 CSS 映射而不是字符串：

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

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

这是一个工作小提琴。

于 2012-05-16T14:10:42.833 回答
1

似乎在http://jsfiddle.net/gaby/6wHtW/工作正常

确保在 DOM 就绪事件之后运行代码。

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

否则你的元素可能不会出现在 DOM 中。

于 2012-05-16T14:08:23.590 回答
1

您在此处发布的代码应该可以工作。我已经多次完成了您尝试做的两个版本。如果它不起作用，则很有可能您的 javascript 中的其他地方有问题，或者您没有要更改的元素的正确选择器/ID。

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

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

于 2012-05-16T14:07:59.743 回答
1

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

$(function(){
    var divStyle = {'background-color': '#00ff00', 'color': '#000000'}
    $('#divID').css(divStyle);
});
于 2017-03-26T04:37:08.943 回答
0

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

var height=$(".sampleClass1").innerHeight();
$('.sammpleClass2').attr('style', 'min-height:'+height+' !important');
于 2021-03-31T18:36:45.223 回答