Jquery getting specific array items and setting them as CSS styles

Question

I've been trying to use the name and value of input fields to set the styles on a button but to no avail, it only appears to return the last value and then a letter of the value.

$(':input').each(function() {
   var inputvalue = $(this).val(); 
   var inputname = $(this).attr("name");
   // alert(inputvalue)
   // alert(inputname)
   $(".button").attr("style" , inputname[0] + ":" + inputvalue[0] + ";" + inputname[1] + ":" +  inputvalue[1]); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="text" value="1px" name="border-width">
<select name="border-style">
  <option value="none">None</option>
  <option value="solid">Solid</option>
  <option value="dotted">Dotted</option>
  <option value="dash">Dashed</option>
</select>

<input type="text" value="green" name="border-color">
    
<div class="button"></div>

Claudio Redi · Accepted Answer · 2015-07-04 14:03:58Z

There are many things to fix on your code.

Style properties are camelCase on DOM. You have to change border-width by borderWidth, and the same for the rest
You have to execute your logic to set style on change event handler, otherwise it will never be executed
Your each logic won't work as it is, I fixed it on my example.

Here you have a working example

HTML

<input type="text" value="1px" name="borderWidth">
<select name="borderStyle">
  <option value="none">None</option>
  <option value="solid">Solid</option>
  <option value="dotted">Dotted</option>
  <option value="dash">Dashed</option>
</select>

<input type="text" value="green" name="borderColor">

<div class="button">test</div>

Javascript

$(':input').change(function() {
    var style = {}
    $(':input').each(function() {
       var inputvalue = $(this).val(); 
       var inputname = $(this).attr("name");
       style[inputname] = inputvalue; 
    });

    $(".button").css(style); 
});

DEMO

Gustaf Gunér · Accepted Answer · 2015-07-04 14:04:25Z

This should work.

$( "input" ).keyup(function() {
    change();
});
$('select').change(function(){
    change();
});


function change(){
  var style= "";
  $('.attr').each(function() {
   var inputvalue = $(this).val();
   var inputname = $(this).attr("name");
   style = style + inputname+":"+inputvalue+";";
  }); 
  $('.button').attr('style',style);
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input class="attr" type="text" value="1px" name="border-width">
<select class="attr" name="border-style">
  <option value="none">None</option>
  <option value="solid">Solid</option>
  <option value="dotted">Dotted</option>
  <option value="dash">Dashed</option>
</select>

<input class="attr" type="text" value="green" name="border-color">
    
<div class="button">1231</div>

winhowes · Accepted Answer · 2015-07-04 14:06:15Z

0

I've merged your styles into an object and then passed that in to the css function, to give it all the styles. I've also defaulted your dropdown to dotted so you can see it works, but you can change that to whatever you like.

Finally, if you would like the styles to update every time you change a value, I would recommend wrapping everything between my two comments in this:

$(":input").on("change input", function(){
    //Insert below code
});

Change your code to this:

$(function(){
   //Begin core functionality
   var styles = {};
   $(':input').each(function() {
      styles[$(this).attr("name")] = $(this).val();   
   });
   $(".button").css(styles); 
   //End core functionality
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="text" value="1px" name="border-width">
<select name="border-style">
  <option value="none">None</option>
  <option value="solid">Solid</option>
  <option value="dotted" selected="selected">Dotted</option>
  <option value="dash">Dashed</option>
</select>

<input type="text" value="green" name="border-color">
    
<div class="button">Text</div>

edited Jul 4, 2015 at 14:06

answered Jul 4, 2015 at 13:53

winhowes

8,1255 gold badges31 silver badges41 bronze badges

1 Comment

Kilmazing Over a year ago

You'll get a performance gain from using a selector 'input' instead of the jquery selector ':input' because :input is not part of the css spec. But that is not the issue with the code.

Collectives™ on Stack Overflow

Jquery getting specific array items and setting them as CSS styles

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related