如何将参数从javascript发送到css

Question

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

情景：

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

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

有多个这样的图像，其颜色应根据用户选择而改变。那么有没有办法在背景图像中设置它：url（../ image_colorparameter.png）

Answer 1

特定类

所以，如果你有特定的classes，那么这是一个很好的方法：

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/

Answer 2

您可以使用$ .css（）方法更改CSS属性。 http://api.jquery.com/css/ 您也可以使用相同的方法检索CSS属性。

以下方法允许您根据用户选择以参数化方式更改背景图像。

function changebackground(var color) {
   $('body').css('background-image','url(img/'+ color +'.jpg)');
}

Answer 3

一种简单的方法是只将图像名称指定为选项的ID。选择任何选项后，执行:: var v = $（＆＃34; option＆＃34;）。id（）; $（＆＃34;主体＆＃34）。CSS（＆＃34;背景＆＃34;＆＃34; URL（＆＃34; + V +＆＃34）＆＃34）;