通过JavaScript动态地向页面添加CSS

Question

我正在制作一个小部件，将其添加到外部网站上，并创建了一个生成CSS供他们样式化它的页面（包括文本颜色、背景颜色、字体大小等）。最终会得到一个填充有CSS的文本域，供他们复制/粘贴到他们的网站上。

有没有一种方式将此CSS添加到当前页面中，以便实时预览？

- John Smith

Answer 1

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

- vogdb

---

JavaScript允许在语句末尾不加;，但这可能导致意外行为，并被视为不良实践。 - Daniel W.

我不得不使用 innerText 而不是 innerHTML 来使其在 Chrome 中工作。 - anon

你可以直接使用document.head来代替document.getElementsByTagName('head')[0]。 - Pontiacks

太好了。我在我的回答中没有使用它们，但是那些Crockford的追随者已经攻击这篇文章好几年了，每周都要求加上分号。最终，在我不在线的某个时候，他们做到了。无论如何，我很高兴常识最终占了上风。 - vogdb

@FlashThunder 最好的指南标准是使用的 ESLint 规则集...最大的规则集，如 AirBnB、Standard 和大多数 TypeScript 规则集都不使用 ;。原因是即使你使用它们，你也需要知道何时需要一个分号，那么为什么要使用它们呢？Vue 的作者 Evan You 有一份关于此的好幻灯片展示。http://slides.com/evanyou/semicolons - Ray Foss

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 的东西）。

像 #myWrapper {margin: 0; padding: 0} 这样纳入基本 CSS 重置可以成为构建自己定制样式的良好起点。

针对您的独特案例，可以指定带有标准元素的 div。然后当用户单击 "update" 按钮时读取规则并将其附加到头部。如果您想要消除过去规则产生的任何残留效果，可以删除最后一个 <style> 元素，或者更好的方法是给您的 <style> 元素一个 id。我不确定那种选择是否有效，但应该可以。

- Josh K

---

建议您调整回答，避免使用jQuery，因为提问者未提及或标记问题为使用jQuery。请保持内容不变，使其更通俗易懂。 - jondavidjohn

@Jondavid：我使用jQuery进行一次调用，实际上只需使用纯JavaScript就可以轻松完成。简单的DOM操作。我的答案使用了jQuery，如果OP不想使用jQuery，那么他当然可以修改我示例代码中的那个小部分。 - Josh K

那你为什么不调整你的回答以符合原帖的规定要求呢？ - jondavidjohn

@jondavid：楼主忘记提供任何规格说明。 - Josh K

jQuery非常常见，回答问题时不应该猜测提问者拥有的工具。当存在疑虑时，建议推荐您自己会做的事情。我肯定不会建议使用纯DOM操作。 - B T

@BT 和 Josh-K，按照惯例，除非 OP 将 jQuery 添加为标签，否则 jQuery 不是规范的一部分。jondavidjohn 是正确的。12 年后，纯 JS 的答案比 jQuery 的答案更有用。 - undefined

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

- Konstantin Tarkus

Answer 4

你能否在DOM中添加一个带有文本区域内容的

- Antoine Latter

Answer 5

我建议你开始使用一个不错的框架来进行网页/JavaScript开发，个人推荐jQuery。

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

这里有一些代码片段，可以帮助你快速设置元素的 CSS 属性。

- RichardTheKiwi

---

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

@AaronC 在这个情境下，那似乎是纠结小节了——这个陈述的实质是“我建议使用一个[成熟且维护良好的可重用代码，解决许多常见问题]，这样你就可以专注于表达你的逻辑的大局意义，而不是实现细节”——像“框架”这样的词也有一般的抽象可组合的含义，不仅仅是我们在软件中使用的更具体/独特和物化的含义，而且精确的含义相对于你实际说的内容的上下文而言是一个价值。 - mtraceur

现在我确定这里的一些反对票并不是因为答案使用了“框架”而不是一个更适合的词，如果你将一个特定的严格上下文投射到它上面。但当我看到这个答案中的框架时，我可以立即告诉，因为在那种严格的解释中，“框架”是错误的 - 回答者的意思更加抽象和灵活 - 这个答案推荐的形状适用于您使用的可重用代码是“库”、“框架”或其他任何东西。我希望大多数人反对的原因不是因为措辞问题。 - mtraceur

现在说到这里，我对此回答的批评是，当有人问“如何做[x]”时，回答“使用已经做[x]的东西”只有在某些情况下才合适，特别是当提问者想要理解基本原理或者提问者有充分的理由不重用已经做[x]的事物时，这种回答就不合适了。（但是为了公正起见，在人们问或搜索“如何做[x]”时，实际上是含糊不清的 - 你是否想要任何实用的完成任务的答案或从基础开始的答案？可能是二者之一。） - mtraceur

@mtraceur 我不同意。 - Aaron C