通过javascript向页面动态添加css

我正在制作一个小部件，它将被添加到外部网站，并且我已经制作了一个页面，为他们生成css来设置样式（文本颜色、背景颜色、字体大小等）。我最终得到了一个填充css的文本区域，供他们复制/粘贴到自己的网站上

---

是否有方法将此css添加到当前页面以进行实时预览？

能否向DOM添加一个

style

标记，其中包含文本区域的内容？您可能想给它一个id，以便以后可以更改它。

我建议您开始使用一个像样的框架进行web/JavaScript开发，我个人会选择jQuery

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

---

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

传统上，我在执行元素时会附加一个

块

var style_rules = [];

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

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

var样式_规则=[]；
样式#rules.push（“#”+myElemId+“{/*rules*/}”）；
/* ... */
var style=''+style_rules.join（“\n”）+”；
$（“标题”）。追加（样式）；

需要注意的一件重要事情是，因为您不知道任何现有样式是什么，或者页面上的

id

可能有什么冲突，所以跟踪JavaScript应用程序中的id非常有用，然后使用它们填充注入的

块。我还倾向于通过前缀函数运行我的名称，以确保

包装器

和

单元

的通用名称不冲突（它们被转换为类似

myunique\u包装器

和

myunique\u单元

）

合并一个基本的CSS重置，比如

#myWrapper{margin:0；padding:0}

，可以作为一个不错的开始平台来构建您自己的自定义样式

---

针对您的独特情况，可以说是一个实时预览，我会用标准元素指定一个div。然后当他们单击“更新”时阅读规则并将其附加到头部。如果你想消除过去规则的任何残余影响，你可以删除最后一个

元素，或者最好给你的

元素一个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'）；
setAttribute（'type'，'text/css'）；
if（'textContent'在元素中）{
element.textContent=css；
}否则{
element.styleSheet.cssText=css；
}
document.getElementsByTagName（'head'）[0].appendChild（元素）；

我建议您调整答案，排除jQuery的使用，因为OP没有提到它的使用，也没有在问题上加上标签jquery@Jondavid：我用jQuery打了一个电话，这实际上和纯JavaScript一样简单。简单的DOM操作。如果OP不想使用jQuery，我的答案是使用jQueryn他当然可以修改我示例代码的一小部分。那你为什么不调整你的答案以符合OP的规范呢？@jondavid:OP忽略了给出任何规范。jquery非常常见，答案的责任不是试图猜测OP使用的工具。如果有疑问，请推荐我我当然不建议使用纯粹的dom操作。JavaScript允许不将

；

放在末尾，但它可能会导致意外行为，被认为是不好的做法。是否有任何npm包/js库可以做到这一点，我可以只传递CSS JSON对象？我必须使用

innerText

，而不是e> innerHTML要在Chrome中实现此功能，只需执行

document.head

而不是

document.getElementsByTagName（'head'）[0]这是很好的。我在回答中没有使用它们，但是那些克劳福德的追随者每个星期都攻击这个职位，要求分号。最后他们在我不在线的时候做了一段时间。无论如何，我很高兴常识是占优势的。我不认为jQuery是一个框架，JQuery也不认为自己是FR。根据jQuery的说法，amework“jQuery是一个快速、小且功能丰富的JavaScript库。”