我想根据用户选择设置背景图片。
场景:
用户在颜色选项中选择一种颜色。基于此,必须像主题一样更改背景图像。
例如,如果用户选择红色背景图片应该是image_red.png。如果用户将颜色更改为紫色,则它应该是 image_violet.png。
有多个像这样的图像,其颜色应根据用户选择而变化。那么有没有办法在 css 中设置它,比如 background-image: url(../image_colorparameter.png)
最佳答案
特定类
所以,如果您有特定的类
,这里有一个很好的方法:
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/
关于javascript - 如何将参数从javascript发送到css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22369666/