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

Question

我正在制作一个将添加到外部网站的小部件,我已经创建了一个页面,为它们生成css样式(文本颜色,背景颜色,字体大小等).我最终得到了一个充满css的textarea,他们可以复制/粘贴到他们的网站上.

有没有办法将此CSS添加到当前页面以进行实时预览？

Answer 1

如果你想添加CSS文本

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = 'content';
document.getElementsByTagName('head')[0].appendChild(style);

如果你想添加css文件

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', 'css/my.css');
document.getElementsByTagName('head')[0].appendChild(link);

Answer 2

传统上我<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.我不确定这种选择是否有效,但应该如此.

Answer 3

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

Answer 4

您可以style向 DOM 添加一个标签，其中包含文本区域的内容吗？您可能想给它一个 ID，以便以后可以更改它。