CSS 样式动态加载和卸载

在本文中，我们将介绍如何使用CSS样式动态加载和卸载。动态加载和卸载样式表是一个很有用的技术，在实际开发中经常会遇到这种需求。我们将通过示例和解释来说明这种技术的应用。

阅读更多：CSS 教程

动态加载CSS样式表

动态加载CSS样式表是在页面上动态地引入一个外部样式表。这对于需要根据特定条件动态更改页面样式的情况非常有用。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>动态加载CSS样式表</title>
  <script>
    function loadStylesheet(url) {
      var stylesheet = document.createElement('link');
      stylesheet.href = url;
      stylesheet.rel = 'stylesheet';
      stylesheet.type = 'text/css';
      document.head.appendChild(stylesheet);
    }
  </script>
</head>
<body>
  <h1>动态加载CSS样式表</h1>
  <button onclick="loadStylesheet('styles.css')">加载样式表</button>
</body>
</html>

在上面的示例中，我们定义了一个名为loadStylesheet的函数，它将创建一个link元素，并将其添加到文档头部。在onclick事件中，我们调用loadStylesheet函数并传入样式表的URL。当按钮点击时，样式表将被动态加载到页面上。

动态卸载CSS样式表

动态卸载CSS样式表是从页面上移除一个已经加载的样式表。这对于在特定条件下移除样式或更改样式非常有用。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>动态卸载CSS样式表</title>
  <style id="dynamic-stylesheet">
    body {
      background-color: yellow;
    }
  </style>
  <script>
    function unloadStylesheet(id) {
      var stylesheet = document.getElementById(id);
      stylesheet.parentNode.removeChild(stylesheet);
    }
  </script>
</head>
<body>
  <h1>动态卸载CSS样式表</h1>
  <button onclick="unloadStylesheet('dynamic-stylesheet')">卸载样式表</button>
</body>
</html>

在上面的示例中，我们定义了一个名为unloadStylesheet的函数，它将从文档头部中移除指定ID的样式元素。在onclick事件中，我们调用unloadStylesheet函数并传入样式表的ID。当按钮点击时，指定的样式表将被动态卸载。