如何在不解析/标记化的情况下使用Javascript / jQuery应用CSS字符串来检索属性 - 值对？

Question

I have some CSS in string form, eg

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, eg in url sub-values.

Answer 1

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

Answer 2

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.

Answer 3

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/

Answer 4

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/

Answer 5

您可以使用jQuery .attr（）函数将css字符串直接添加到style属性中，但是更好的方法是使用jQuery .addClass（）函数为div分配一个类，并将css属性添加到类。

Answer 6

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

Answer 7

只需使用jQuery的函数.attr('style', 'somthing...') ，它非常易于使用，您不必考虑容错。

Answer 8

您可以将其作为对象检索

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