如何使用 jquery 应用复杂的生成样式？答案

【问题标题】：How to apply complex generated styles with jquery?如何使用 jquery 应用复杂的生成样式？
【发布时间】：2012-02-25 21:59:30
【问题描述】：

假设我们生成了这样的字符串：

    background:#6356ff;
background:url(data:image/svg+xml;
base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNTZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NWI2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background:linear-gradient(top,#6356ff 0%,#75b6ff 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6356ff',endColorstr='#75b6ff',GradientType=0 );

现在我们想将这种复杂的样式应用到我们的文档 html 和正文中。如何用jQuery执行这样的事情？

【问题讨论】：

标签： javascript jquery html css styles

【解决方案1】：

用

添加

$('#box').attr('style',str);

http://jsfiddle.net/n7ENn/

或者应该可以使用以下 sn-p 附加到现有样式

$('#box').attr('style',$('#box').attr('style')+str);

http://jsfiddle.net/n7ENn/1/

【讨论】：

【解决方案2】：

只要把它放在一个css类和addClass();

.cool {
    background:#6356ff;
    background:url(data:image/svg+xml;
    base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNTZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NWI2ZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background:linear-gradient(top,#6356ff 0%,#75b6ff 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#6356ff',endColorstr='#75b6ff',GradientType=0 );
}

$('#id').addClass('cool');

【讨论】：

不应该引用实际值吗？编辑：哦等等......这是一个CSS定义吗？我相信 OP 要求将“生成的字符串”用作 CSS ...
我认为这不能回答问题。他们将 CSS 作为 javascript 字符串，我想他们想知道如何通过 javascript 应用它。