jquery changes css property

[arunpatal]

Hi,

 

The code below work fine when i want to change the value of background-color property

<script>
$(document).ready(function(){	 
	 $(".img_div").click(function(){
	 var element_value = $(this).val();
	$("#main_div").css({"background-color":element_value});
  });
});
</script>

But when i want to change property itself (background-color), its not working

<script>
$(document).ready(function(){	 
	 $(".img_div").click(function(){
	 var element_prop = $(this).val();
	$("#main_div").css({element_prop:"black"});
  });
});
</script>

[nogray]

You can't use a variable as an object key directly in JavaScript. You need to use brackets [] instead

e.g.

var obj = {};
var element_prop = $(this).val();
obj[element_prop] = 'black';
$("#main_div").css(obj);