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

【问题标题】：Dynamically add css to page via javascript通过 javascript 将 css 动态添加到页面
【发布时间】：2011-06-18 08:28:24
【问题描述】：

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

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

【问题讨论】：

标签： javascript css

【解决方案1】：

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

【讨论】：

【解决方案2】：

我建议你开始为你的 web/JavaScript 开发使用一个不错的框架，我个人会使用 jQuery。

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

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

【讨论】：

我不认为 jQuery 是一个框架，jQuery 也不认为自己是一个框架，根据 jQuery 的说法，“jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。”

【解决方案3】：

我传统上在做元素时会附加一个<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 之类的东西。

结合#myWrapper {margin: 0; padding: 0} 之类的基本 CSS 重置可以成为构建您自己的自定义样式的不错的起始平台。

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

【讨论】：

我建议您调整答案以排除使用 jQuery，因为 OP 没有提到使用它，也没有用 jquery 标记问题
@Jondavid：我使用 jQuery 进行了一次调用，这实际上与使用纯 JavaScript 一样容易。简单的 DOM 操作。我的答案使用 jQuery，如果 OP 不想使用 jQuery，那么他当然可以修改我的示例代码的一小部分。
那你为什么不调整你的答案以符合 OP 的规范？
@jondavid：OP 忽略了提供任何规格。
jquery 非常常见，它不负责尝试猜测 OP 可以使用的工具。如有疑问，请推荐您要做什么。我当然不建议使用纯 dom 操作..

【解决方案4】：

如果你想将 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);

【讨论】：

JavaScript 允许不要将; 放在末尾，但这可能会导致意外行为，被认为是不好的做法。
是否有任何 npm 包/js 库可以做到这一点，我可以只传递一个 CSS JSON 对象？
我必须使用 innerText 而不是 innerHTML 才能让它在 Chrome 中工作。
你可以用document.head代替document.getElementsByTagName('head')[0]
太棒了。我没有在我的回答中使用它们，但那些 Crockford 的追随者每周都在攻击这篇文章好几年，要求使用分号。最后他们在我有一段时间不在线的情况下制作了。无论如何，我很高兴常识占了上风。

【解决方案5】：

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

【讨论】：