[英]How to send parameters from javascript to css
I want to set the background image based on user selection. 我想根据用户选择设置背景图像。
Scenario: 场景:
User selects a color among color options. 用户在颜色选项中选择颜色。 Based on this the background image must be changed like theme. 基于此,背景图像必须像主题一样改变。
For example, if user selects red color background image should be image_red.png. 例如,如果用户选择红色背景图像应该是image_red.png。 If user changes the color to violet it should be image_violet.png. 如果用户将颜色更改为紫色,则应为image_violet.png。
There are multiple images like this the color of which should change according to user selection. 有这样的多个图像,其颜色应根据用户选择而改变。 So is there a way of setting it in css like background-image: url(../image_colorparameter.png) 那么有没有一种方法可以在css中设置它像background-image:url(../ image_colorparameter.png)
So, here's a nice way to do it if you have specific classes
in mind: 所以,如果你有特定的classes
,这里有一个很好的方法:
(added background functionality for class names) (为类名添加了背景功能)
(additional proof of concept. Type your own dynamic image and it will populate.) (额外的概念证明。键入您自己的动态图像,它将填充。)
HTML: 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: CSS:
#thisThing {
width:200px;
height:200px;
}
.yellow {
background:#FC2;
}
.blue {
background:#00F;
}
.red {
background:#F00;
}
jQuery: jQuery的:
$(function() {
$('input').on('click', function() {
var color = $(this).attr('id');
$('#thisThing').removeClass();
$('#thisThing').addClass(color);
});
});
Obviously you'd change the classes from background
to background:url(...)
but I didn't have your images. 显然你会把类从background
改为background:url(...)
但我没有你的图像。
Additional note. 附加说明。 No need to use ID
if you don't want. 如果你不想要,不需要使用ID
。 value
, name
also work in this case. value
, name
也适用于这种情况。 See here: 看这里:
You can change the CSS properties using $.css() method. 您可以使用$ .css()方法更改CSS属性。 http://api.jquery.com/css/ Also you can retrieve the CSS property using the same method. http://api.jquery.com/css/您还可以使用相同的方法检索CSS属性。
Following method will allow you to change the background image in a parametrized way based on user selection. 以下方法将允许您根据用户选择以参数化方式更改背景图像。
function changebackground(var color) {
$('body').css('background-image','url(img/'+ color +'.jpg)');
}
One of simple way is to just assign image name as an id for option. 一种简单的方法是只将图像名称指定为选项的ID。 Once any option is selected do :: var v = $("option").id(); 选择任何选项后,do :: var v = $(“option”)。id(); $("body").css("background","url("+v+")"); $( “身体”),CSS( “背景”, “URL(” + V + “)”)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.