CODEWITHSUNDEEP
javascriptjquerycss
Andrew Cheong
Andrew Cheong

Reputation: 30273

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

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.

Upvotes: 14

Views: 24241

Answers (8)

4EACH
4EACH

Reputation: 2197

you can retrieve it as an object

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

Upvotes: 0

vagdwd
vagdwd

Reputation: 243

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/

Upvotes: 3

Vanilla
Vanilla

Reputation: 122

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 .

Upvotes: 1

Aadit M Shah
Aadit M Shah

Reputation: 74204

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/

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337560

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.

Upvotes: 4

T.J. Crowder
T.J. Crowder

Reputation: 1074108

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

Upvotes: 26

arnaud
arnaud

Reputation: 86

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.

Upvotes: 1

robinef
robinef

Reputation: 312

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');

Upvotes: 0

Related Questions