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

Question

I want to add (append) 3 CSS rules to my head tag using <link /> tags 我想使用<link />标签向我的head标签添加（附加）3个CSS规则

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

Is this syntax valid to use or not? 这种语法有效使用与否？

I know I can wrap my rules within <style> Like 我知道我可以在<style>包含我的规则

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

Answer 1

It appears you can as long as you properly declare the data URI. 只要您正确声明数据URI，它就会出现。 I've found the following to work: 我找到了以下工作：

// 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);

Results in the page text turning red . 页面文本中的结果变为红色。

Though, depending on how long your CSS it, you may also want to base64 encode it. 虽然，根据你的CSS多长时间，你可能还想对它进行base64编码。 So, your .href becomes: 所以，你的.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 个解决方案

解决方案1
1 已采纳 2014-05-22 13:35:18

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-05-22 13:35:18

解决方案1
1 已采纳 2014-05-22 13:35:18