Javascript动态创建 style 节点

动态创建style节点的多种路径

在网页开发中，我们常常需要动态地创建和管理样式。虽然有许多方法可以从外部CSS文件动态加载样式，但有时我们需要更灵活地通过程序生成字符串来创建style节点。这是一项具有挑战性的任务，但经过一番，我们可以找到一些解决方案。

对于静态外部CSS文件的加载，我们通常采用以下两种方法：

1. 创建link元素并设置其href、rel和type属性，然后将它添加到head元素中。

2. 使用document.createStyleSheet()方法加载外部样式表。

当我们尝试使用程序生成的字符串动态创建style节点时，会遇到一些浏览器兼容性的问题。以下是一些尝试和解决方案：

在Firefox中，我们可以通过创建一个style元素，设置其type属性为'text/css'，然后设置其innerHTML属性为我们的样式字符串。这种方法在Internet Explorer中并不适用。

我们还尝试使用document.createStyleSheet()方法，并通过addRule()方法添加样式规则。这种方法虽然可以在Internet Explorer中工作，但是对于长样式字符串来说，需要将其拆分，这显得有些繁琐。

在某个未知语言的blog上，我们找到了一种方法，使用document.createStyleSheet()并传递一个包含样式字符串的javascript伪URL。这种方法有一个限制，即URL的长度限制为255个字符。

我们通过将样式字符串存储在全局的window.style变量中，然后使用document.createStyleSheet("javascript:style")解决了这个问题。这是一种巧妙的解决方案，可以跨浏览器工作。

下面是一个结合了这些解决方案的HTML示例，其中包含一个按钮，当点击该按钮时，会根据你的浏览器动态更改背景颜色：

```html

```

这个示例中的代码会根据浏览器的兼容性选择最合适的方法来动态创建和应用样式。这是一个强大的工具，让我们可以在需要时动态地改变网页的外观和感觉。