通过 javascript 动态地将 css 添加到页面

我正在做一个小部件，将添加到外部网站，我已经生成了一个页面，为他们的 CSS 样式(文本颜色，背景颜色，字体大小等)。最后我得到了一个充满 css 的文本区域，他们可以复制/粘贴到他们的网站上。

有没有办法把这个 css 添加到当前页面，以便有一个现场预览？

62704 次浏览
小开

Can you add a style tag to the DOM, with the contents of the text-area in it? You may want to give it an id so you can change it later.

小开

我建议您开始为 Web/JavaScript 开发使用一个像样的框架，我个人建议使用 jQuery。

http://api.jquery.com/css/

这里有一些代码片段向您展示如何快速设置元素的 css 属性。

小开

在处理元素时，我通常会附加一个 <style>块。

var style_rules = [];


style_rules.push("#" + myElemId + " { /* Rules */ } ");
/* ... */


var style = '<style type="text/css">' + style_rules.join("\n") + "</style>";
$("head").append(style);

需要注意的一点是，因为您不知道任何现有的样式是什么，或者页面上的 id可能会发生什么冲突，所以在 JavaScript 应用程序中跟踪您的 id 是非常有用的，然后使用这些来填充注入的 <style>块。我还倾向于通过一个前缀函数来运行我的名字，以确保 wrapper和 unit的通用名称不会冲突(它们被转换成类似于 myunique_wrapper和 myunique_unit的东西)。

结合基本的 CSS 重置，如 #myWrapper {margin: 0; padding: 0}可以是一个体面的开始平台，建立自己的自定义样式。

针对您的独特情况，可以说是一个现场预览，我将指定一个带有标准元素的 div。然后，当他们点击“更新”阅读的规则，并附加到他们的头部。如果您想要消除过去规则的任何残余影响，您可以删除最后一个 <style>元素，或者更好的方法是给您的 <style>元素一个 id。我不确定这种选择是否有效，但应该有效。

小开

如果要将 CSS 添加为文本

var style = document.createElement('style');
style.innerHTML = 'content';
document.head.appendChild(style);

如果要添加 CSS 文件

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'css/my.css');
document.head.appendChild(link);
小开 
var element = document.createElement('style');
element.setAttribute('type', 'text/css');


if ('textContent' in element) {
element.textContent = css;
} else {
element.styleSheet.cssText = css;
}


document.getElementsByTagName('head')[0].appendChild(element);

提交答案