【问题标题】：How to send parameters from javascript to css如何将参数从javascript发送到css
【发布时间】：2014-03-13 14:20:00
【问题描述】：

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

场景：

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

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

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

【问题讨论】：

请看这篇文章。这得到了你想要的stackoverflow.com/questions/5195303/…
请看这篇文章。这得到了你想要的stackoverflow.com/questions/5195303/…stackoverflow.com/questions/2750710/…
如果你只想使用改变颜色，你可以使用背景颜色而不是使用图像
简单的方法：在body上设置一个class或data-attrib，其值为用户选择的颜色。然后您可以使用纯 css 属性选择器来更改各种规则，方法是在普通选择器前面加上一个，例如，“body[data-color='red']”限制器。只需一行 JS 就可以在分隔边界的同时简化编码。

标签： javascript jquery css parameters

【解决方案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/

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

一种简单的方法是将图像名称分配为选项的 id。一旦选择了任何选项，请执行:: var v = $("选项").id(); $("body").css("background","url("+v+")");

【讨论】：