Question

我想使用CSS标记向我的head标记添加（附加）3 <link />个规则

$('head').append('<link rel="stylesheet" href="data:text/css, .rule0 {} .rule1 {} .rule2 {}" />');

这种语法是否有效？

我知道我可以将我的规则包含在<style>之内

$('head').append('<style>.rule0 {} .rule1 {} .rule2 {}</style>');

Answer 1

只要您正确声明数据URI，就会出现这种情况。我找到了以下工作：

// Your CSS content, whatever it may be
var css = '*{color:red;}';

// Build your `<link>` dynamically
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'data:text/css;charset=UTF-8,' + encodeURIComponent(css);

// Append to `<head>`
document.getElementsByTagName('head')[0].appendChild(link);

page text turning red。

中的结果

虽然，根据你的CSS多长时间，你可能还想对它进行base64编码。因此，您的.href变为：

// note: you need to find a base64_encode implementation for this; javascript
//       doesn't natively have one.
link.href = 'data:text/css;base64,' + base64_encode(css);

使用数据是否有效：text / css？

1 个答案: