javascript - 如何将参数从javascript发送到css

Question

我想根据用户选择设置背景图片。

场景:

用户在颜色选项中选择一种颜色。基于此，必须像主题一样更改背景图像。

例如，如果用户选择红色背景图片应该是image_red.png。如果用户将颜色更改为紫色，则它应该是 image_violet.png。

有多个像这样的图像，其颜色应根据用户选择而变化。那么有没有办法在 css 中设置它，比如 background-image: url(../image_colorparameter.png)

Answer 1

特定类

所以，如果您有特定的类，这里有一个很好的方法:

http://jsfiddle.net/nbMdb/

(添加了类名的背景功能)

http://jsfiddle.net/nbMdb/2/

(额外的概念证明。输入您自己的动态图像，它将填充。)

http://jsfiddle.net/nbMdb/3/

HTML:

<div id="thisThing"></div>

<input id="yellow" type="button" name="yellow" value="yellow" />
<input id="red" type="button" name="red" value="red" />
<input id="blue" type="button" name="blue" value="blue" />

CSS:

#thisThing {

    width:200px;
    height:200px;
}
.yellow {
    background:#FC2;
}
.blue {
    background:#00F;
}
.red {
    background:#F00;
}

jQuery:

$(function() {
    $('input').on('click', function() {
        var color = $(this).attr('id');
        $('#thisThing').removeClass();
        $('#thisThing').addClass(color);
    });
});

显然，您会将类从 background 更改为 background:url(...) 但我没有您的图片。

补充说明。如果您不想，则无需使用 ID。 value, name 也适用于这种情况。看这里:

http://jsfiddle.net/nbMdb/1/