通过javascriptdynamic地添加CSS到页面
我正在做一个小部件，将被添加到外部网站，我已经做了一个页面，生成CSS的风格（文本颜色，背景颜色，字体大小等）。 我结束了一个textarea充满CSS让他们复制/粘贴到他们的网站。
有没有办法将此CSS添加到当前页面以便进行实时预览？
如果你想添加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);
传统上，在做元素时，会附加一个<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} #myWrapper {margin: 0; padding: 0}可以成为一个体面的开始平台，用于构build自己的自定义样式。
为了解决你的独特的案例，可以这么说，我会指定一个带有标准元素的div。 然后当他们点击规则中的“更新”并将它们追加到头部。 如果你想消除过去规则的任何残留效应，你可以删除最后的<style>元素，或者更好的给你的<style>元素一个id。 我不确定这样的select是否可行，但是应该。
你可以添加一个style标签的DOM，文本区域的内容呢？ 你可能想给它一个ID，所以你可以稍后改变它。
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);
我build议你开始使用一个体面的框架为您的网站/ JavaScript的发展，个人我会去与jQuery。
http://api.jquery.com/css/
这里有一些代码片断，告诉你如何快速设置元素的CSS属性。
