Using ID string as a css property doesn't work

Question

I have a bunch of divs that i'm using to dynamically change style with jquery.css(). The way I'm pulling the property is to return the div id of the container.

In this case, stylechange = "fontFamily" because that's the ID of the main container.

str = the value of the checked option.

I've console.log() and alert() to debug this, and i'm getting strings returned, and when i manually set the properties and values it works.

However, using variables as either the property or the value does not work, and I'm stumped.

Javascript:

var stylechange = "";
var str = "";
$("select").change(function(){
   stylechange = $("select option:selected").parents(".styleoptions").attr('id');
   str = $("select option:selected").text();
   $(".elementselected textarea").css({stylechange: str});
})

HTML: This is the div

<div class="ui-draggable ui-resizable addeddiv elementselected absolute move" style="position: relative; display: block;">
   <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: block;"></div>
   <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: block;"></div>
   <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
   <div class="removethis ui-resizable-handle absolute">X</div>
   <textarea type="textbox" class="addedtext"></textarea>
</div>

This is the HTML that the css gets the ID from

<div id="fontFamily" class="styleoptions" style="display: block; text-transform: capitalize;">
   <div class="optiontitle" style="text-transform: capitalize;">family</div>
   <div class="options" style="text-transform: capitalize;">
      <select style="text-transform: capitalize;">
         <option style="text-transform: capitalize;">palatino</option>
         <option style="text-transform: capitalize;">arial</option>
         <option style="text-transform: capitalize;">verdana</option>
         <option style="text-transform: capitalize;">times new roman</option>
      </select>
   </div>
</div>

We'll need to see some HTML, but from the looks of it, you forgot to put the var in front of stylechange to actually declare it as a variable. And fontFamily isn't a CSS property, but font-family is — Cody Guldner
– Cody Guldner, Commented Jul 27, 2013 at 4:28
That sounds like a horrible idea! Using CSS properties as ID's ? — adeneo
– adeneo, Commented Jul 27, 2013 at 4:28
I added the HTML, and I did declare the variables beforehand. — Mourkeer
– Mourkeer, Commented Jul 27, 2013 at 4:41

Arun P Johny · Accepted Answer · 2013-07-27 04:33:23Z

2

Your code tries to set a css property called stylechange, which is not what you need, you wants to set the css property assigned to the variable stylechange

so you need to use

$(".elementselected textarea").css(stylechange, str);

Or

var style = {};
style[stylechange] = str;
$(".elementselected textarea").css(style );

answered Jul 27, 2013 at 4:33

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using ID string as a css property doesn't work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related