jQuery应用CSS字符串来检索属性 – 值对？

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

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

我想将CSS应用于

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

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

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

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

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

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

实例 | 资源

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

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

示例小提琴

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

首先使用选择器获取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/

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

  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/

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

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

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

然后

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

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

您可以将其作为对象进行检索

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

Interesting Posts