How to add custom CSS on button click?

Question

I have a button that has some predefined CSS. With this button i have created an action button and a textarea.

Whenever i write some CSS in textarea then it should be added to existing button's CSS when submitting this CSS by action button.

I tried this-

jQuery-

$(function(){
    $('.add').click(function(){
      var custom=$('.textarea').val();
        $('.button').css(custom);

    });
});

But it doesn't seem to be working, How can i do this?

Is iframe Needed here?

Fiddle

Textarea value is string in your case you must to add Javascript object or want to add only 1 property ? — d.danailov
– d.danailov, Commented Jul 7, 2013 at 8:38

Stefan · Accepted Answer · 2013-07-07 08:39:35Z

4

You could try something like:

$('.button').attr("style", custom);

jsFiddle

answered Jul 7, 2013 at 8:39

Stefan

1,1068 silver badges10 bronze badges

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

3 Comments

Stefan Over a year ago

Oh yes indeed, you can remove this. It's used for logging messages to the console.

DACrosby Over a year ago

@Manoz console.log is used for troubleshooting code - it outputs different values you specify to the console to see what's going on and when. It's not necessary in production!

Manoz Over a year ago

@Stefan v., That was quick one. +1.

varun · Accepted Answer · 2013-07-07 08:48:53Z

1

Maybe try this

   $(function(){
        $('.add').click(function(){
          var custom=$('.textarea').val().split(',');        
             $('.button').css(custom[0],custom[1]);
        });
    });

pass in background,redin text area

answered Jul 7, 2013 at 8:48

varun

4,65036 silver badges28 bronze badges

1 Comment

Manoz Over a year ago

Awesome and easy one. Taught me something new today +1.

Collectives™ on Stack Overflow

How to add custom CSS on button click?

Fiddle

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related