我想添加(追加)3 CSS我的规则 head使用 <link /> 标记标签
$('head').append('<link rel="stylesheet" href="data:text/css, .rule0 {} .rule1 {} .rule2 {}" />');
这个语法是否有效？
我知道我可以将我的规则包含在 <style> 中喜欢
$('head').append('<style>.rule0 {} .rule1 {} .rule2 {}</style>');
最佳答案
看来只要正确声明数据 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);
关于jquery - 使用数据:text/css?是否有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23807954/