How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

Question

I have some CSS in string form, e.g.

border: solid 1px #0000ff; background-color: #ffff00;

and I want to apply that CSS to a <div>. But all of the examples for using jQuery to apply CSS involve using the css method, and to go that route, I'd have to split the CSS string by semicolons (;) to retrieve property-value pairs, then by (:) to retrieve the property and value, and do

$('myDiv').css(property, value);

Is there a way to apply the CSS directly, from its string form?

I worry that such a naive parsing of the CSS (semicolons and colons) will fail if CSS values can contain those characters, e.g. in url sub-values.

you could try using .attr()

Pete
– Pete

2013-02-12 10:11:02 +00:00
Commented Feb 12, 2013 at 10:11 — Pete
– Pete, Commented Feb 12, 2013 at 10:11

T.J. Crowder · Accepted Answer · 2013-02-12 10:11:32Z

26

You can retrieve the existing style attribute and then set a new one:

var target = $("#target");
target.attr("style", target.attr("style") + "; " + yourString);

Live Example | Source

answered Feb 12, 2013 at 10:11

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Andrew Cheong Over a year ago

Thanks. I can't believe I didn't think of this in the time I spent typing up that question.

dognose Over a year ago

It works, it just leads to some unnice css, if you dynamically apply attributes like this, as they change. (will be a concatenation of multiple times "yourString", where ofc. the latest occurence of every prop will win)

Rory McCrossan · Accepted Answer · 2013-02-12 10:11:33Z

4

Assuming there are no inline styles set on the element using the style attribute, the following will work:

$("#foo").attr('style', 'border: solid 1px #0000ff; background-color: #ffff00;');

Example fiddle

Note that this is not an ideal solution though. A much better method would be to put the required styles in a class and use addClass() instead.

answered Feb 12, 2013 at 10:11

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

2 Comments

Declan Cook Over a year ago

You can always just contact the style strings and keep any inline styles.

Rory McCrossan Over a year ago

@DeclanCook indeed, TJs answer is more complete than mine for that reason

Aadit M Shah · Accepted Answer · 2013-02-12 10:13:37Z

4

First get your div element using a selector:

var div = document.getElementById("myDiv"); // myDiv is the id right?

Then get the current css:

var css = div.getAttribute("style");

If it's null then set it to the new style. Otherwise append the new style:

var style = 'border: solid 1px #0000ff; background-color: #ffff00;';
if (css === null) css = style;
else css += style;

Finally update the style of the div:

div.setAttribute("style", css);

That's it. See the demo: http://jsfiddle.net/xUWzw/

answered Feb 12, 2013 at 10:13

Aadit M Shah

74.5k31 gold badges177 silver badges311 bronze badges

Comments

vagdwd · Accepted Answer · 2015-03-27 04:32:37Z

3

There is another way of adding string based styles. If below is the style string -

    border: solid 1px #0000ff; background-color: #ffff00;

Then

    var div = document.getElementById('myDiv');
    div.style.cssText = 'border: solid 1px #0000ff; background-color: #ffff00;';

Fiddle: https://jsfiddle.net/eja0zea4/

answered Mar 27, 2015 at 4:32

vagdwd

2432 silver badges7 bronze badges

Comments

arnaud · Accepted Answer · 2013-02-12 10:11:20Z

1

You can add the css string directly to the div into the style attribute using jQuery .attr() function, but a better way would be to assign a class to your div with jQuery .addClass() function, and adding the css properties to the class.

answered Feb 12, 2013 at 10:11

arnaud

865 bronze badges

Comments

nhahtdh · Accepted Answer · 2015-03-19 02:45:40Z

1

Just use the jQuery's function .attr('style', 'somthing...')，It's very easy to use and you don't have to think about fault tolerance .

edited Mar 19, 2015 at 2:45

nhahtdh

56.9k15 gold badges131 silver badges164 bronze badges

answered Mar 19, 2015 at 2:32

Vanilla

1224 bronze badges

Comments

robinef · Accepted Answer · 2013-02-12 10:10:49Z

0

Why not creating a CSS class and just using the addClass removeClass method from jQuery

.myClass {
   border: solid 1px #0000ff; 
   background-color: #ffff00;
}

then

$(div).addClass('myClass');

answered Feb 12, 2013 at 10:10

robinef

3121 silver badge7 bronze badges

2 Comments

Andrew Cheong Over a year ago

The CSS is entered by the user, after the page loads. Consider, for example, a tutorial page where the user enters bits of CSS, and a target on the page styles dynamically. How would I apply the CSS class, then?

robinef Over a year ago

You can post the new user style and create a dynamic CSS file with php script then include it on the fly: $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />'); or just do everything on client side by injecting inline style: $('<style>.newClass { color: red; }</style>').appendTo('body');

4EACH · Accepted Answer · 2015-03-27 04:58:32Z

0

you can retrieve it as an object

$('myDiv').css({property:"value",property:"value",property:"value"});

edited Mar 27, 2015 at 4:58

answered Mar 27, 2015 at 4:44

4EACH

2,1974 gold badges20 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to apply CSS string using Javascript/jQuery without parsing/tokenizing to retrieve property-value pairs?

8 Answers 8

2 Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

2 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related