Using jQuery .css() without a specific property

Question

I'll be using a textarea as a code editor. I want to get the value of the textarea and it as the CSS for a specified element.

HTML

<textarea class-"editor">
  background: blue;
  border: 1px solid pink;
</textarea>

JS

$('.editor').keyup(function(){
  var editor_contents = $('.editor').val();
  $('#element').css(editor_contents);
});

As you can see, I don't want to choose a specific CSS property to target. I want to apply the value of the textarea in a string on the style property of #element.

to which style property you want to assign the value to.... you need to target a property to assign the value — Arun P Johny
– Arun P Johny, Commented Dec 15, 2013 at 12:45

A. Wolff · Accepted Answer · 2013-12-15 12:59:42Z

4

You could use cssText property, this is the way to do it in jQuery:

$('.editor').keyup(function(){
  var editor_contents = $('.editor').val();
  $('#element').css("cssText",editor_contents);
});

That supposes editor_contents is a string containing any CSS rule.

DEMO

edited Dec 15, 2013 at 12:59

answered Dec 15, 2013 at 12:50

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

3 Comments

colmtuite Over a year ago

Thanks! I also want to do the reverse. I want to get the CSS of the element and apply it as the value of the textarea. How can I get the CSS of the element as a string?

A. Wolff Over a year ago

@Moppy use: $('.editor').val($('#element').attr("style")); jsfiddle.net/2kDzL/1

Qantas 94 Heavy Over a year ago

@A.Wolff: ignoring any other CSS id or class styles though.

Qantas 94 Heavy · Accepted Answer · 2013-12-15 12:56:33Z

4

Don't bother too much with fancy jQuery functions then -- just assign directly to the style attribute of the element:

$('.editor').keyup(function () {
  var editor_contents = $('.editor').val();
  $('#element').attr('style', editor_contents);
});

edited Dec 15, 2013 at 12:56

answered Dec 15, 2013 at 12:45

Qantas 94 Heavy

16k31 gold badges74 silver badges89 bronze badges

Collectives™ on Stack Overflow

Using jQuery .css() without a specific property

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related