javascript - 如何使用 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（分号和冒号）的这种天真的解析会失败。

score 24 · Accepted Answer

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

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

score 4 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

score 3 · Accepted Answer

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

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

然后

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

只需使用jQuery的功能 .attr('style', 'somthing...')，非常好用，不用考虑容错问题。

score 0 · Accepted Answer

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

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

然后

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

score 0 · Accepted Answer

您可以将其作为对象检索

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

8 回答 8