用正则表达式动态创建/增加css style script 兼容IE firefox

2023年6月10日上午10:42 • JavaScript

动态创建或增加 CSS 和 JS 很常见，特别是要在特定条件下加载代码时。一种常用的方式是使用 JavaScript 和 DOM 操作来实现这个功能，但使用正则表达式来完成这个任务也是一种更加高效、可靠和优雅的方法。

以下是使用正则表达式动态创建/增加 CSS 和 JavaScript 的完整攻略：

用正则表达式动态添加 CSS

动态添加 CSS 通常是为了在 DOM 中某些特定元素上应用特定样式。以下是使用正则表达式动态添加 CSS 的步骤：

创建一个标准的 CSS 格式字符串，例如：

const cssString = 'body {background-color: red;}';

使用正则表达式将 CSS 字符串插入到页面中。这可以通过创建一个新的 <style> 元素并将其添加到页面 <head> 中来实现。以下是一个示例代码：

const cssString = 'body {background-color: red;}';
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
document.head.appendChild(styleElement);
styleElement.appendChild(document.createTextNode(cssString));

如果需要可以在压缩 CSS 的时候将多余的空格和换行符去掉，这样可以减小文件大小。

const cssString = 'body{background-color:red;}';
const styleElement = document.createElement('style');
styleElement.type = 'text/css';
document.head.appendChild(styleElement);
styleElement.appendChild(document.createTextNode(cssString));

这样，我们就成功使用正则表达式动态添加了 CSS。

用正则表达式动态添加 JavaScript

动态添加 JavaScript 通常是为了在页面加载或特定条件下执行一些代码。以下是使用正则表达式动态添加 JavaScript 的步骤：

创建一个标准的 JS 格式字符串, 例如：

const jsString = '(function() { alert("hello!"); })();';

使用正则表达式将 JS 字符串插入到页面中。这可以通过创建一个新的 <script> 元素并将其添加到页面 <head> 或 <body> 中来实现。以下是一个示例代码：

const jsString = '(function() { alert("hello!"); })();';
const scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.appendChild(document.createTextNode(jsString));
document.head.appendChild(scriptElement);

或者

const jsString = '(function() { alert("hello!"); })();';
const scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = 'myScript.js'; // 要加载的 JavaScript 文件
document.head.appendChild(scriptElement);