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

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

提问by Andrew Cheong

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

我有一些字符串形式的 CSS，例如

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 cssmethod, 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

我想将该 CSS 应用到<div>. 但是所有使用 jQuery 应用 CSS 的示例都涉及使用该css方法，要走这条路线，我必须用分号 ( ;)拆分 CSS 字符串以检索属性值对，然后通过 ( :) 来检索属性和价值，并做

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

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

有没有办法从字符串形式直接应用 CSS？

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 urlsub-values.

我担心如果 CSS 值可以包含这些字符（例如在url子值中），那么这种对 CSS（分号和冒号）的幼稚解析将失败。

回答by T.J. Crowder

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

您可以检索现有style属性，然后设置一个新属性：

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

Live Example| Source

现场示例| 来源

回答by Rory McCrossan

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

假设没有在使用该style属性的元素上设置内联样式，以下将起作用：

$("#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.

请注意，这不是理想的解决方案。更好的方法是将所需的样式放在一个类中并使用addClass()。

回答by Aadit M Shah

First get your div element using a selector:

首先使用选择器获取 div 元素：

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

Then get the current css:

然后获取当前的css：

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

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

如果是，null则将其设置为新样式。否则追加新样式：

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的样式：

div.setAttribute("style", css);

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

就是这样。看演示：http: //jsfiddle.net/xUWzw/

回答by vagdwd

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/

小提琴：https: //jsfiddle.net/eja0zea4/

回答by arnaud

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.

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

回答by 4EACH

you can retrieve it as an object

你可以把它作为一个对象来检索

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

回答by robinef

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

为什么不创建一个 CSS 类并只使用jQuery 中的 addClass removeClass 方法

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

then

然后

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

回答by Vanilla

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 .

用jQuery的功能就行了 .attr('style', 'somthing...')，用起来很方便，不用考虑容错。