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

Question

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

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

我希望将该CSS应用于<div>。但是使用jQuery来应用CSS的所有示例都涉及使用css方法，并且要走这条路线，我必须用分号（;）拆分CSS字符串以检索属性值对，然后通过（:）来检索属性和值，并执行

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

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

我担心如果CSS值可以在url子值中包含例如。，那么CSS（分号和冒号）的这种天真解析将会失败。

Answer 1

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

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

Live Example | Source

Answer 2

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

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

Example fiddle

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

Answer 3

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

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

然后获取当前的css：

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

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

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

最后更新div的样式：

div.setAttribute("style", css);

就是这样。请参阅演示：http://jsfiddle.net/xUWzw/

Answer 4

还有另一种添加基于字符串的样式的方法。如果下面是样式字符串 -

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

然后

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

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

Answer 5

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

Answer 6

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

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

然后

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

Answer 7

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

Answer 8

您可以将其作为对象检索

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