📌  相关文章
📜  如何使用 JavaScript 加载 CSS 文件？(1)

📅  最后修改于: 2023-12-03 14:51:54.921000             🧑  作者: Mango

如何使用 JavaScript 加载 CSS 文件？

在 Web 开发过程中，我们经常需要使用 CSS 来控制网页样式。而在 JavaScript 中，我们可以通过动态加载 CSS 文件来实现对网页样式的控制。

在 HTML 中加载 CSS

在 HTML 中，我们通常使用 <link> 标签来引入 CSS 文件。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

在上面的代码中，我们通过 <link> 标签将 style.css 文件引入到了页面中，从而实现了对网页样式的控制。

通过 JavaScript 加载 CSS

除了在 HTML 中使用 <link> 标签加载 CSS 文件，我们还可以通过 JavaScript 来动态加载 CSS 文件。这样，我们就能够更加灵活地控制网页样式。

使用 DOM 创建 <link> 标签

通过 JavaScript 动态加载 CSS 文件的一种常见做法就是使用 DOM 创建 <link> 标签，然后将其插入到 <head> 标签中。例如：

const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'style.css';
document.head.appendChild(link);

在上面的代码中，我们使用 document.createElement() 方法创建了一个 <link> 标签，然后设置了其 rel 属性和 href 属性。最后，我们通过 document.head.appendChild() 方法将这个 <link> 标签插入到了 <head> 标签中。

动态创建样式表

除了使用 <link> 标签，我们还可以通过 JavaScript 动态创建样式表，并将其插入到 <head> 标签中。例如：

const styles = `
  body {
    background-color: #f0f0f0;
  }

  h1 {
    color: red;
  }
`;

const styleSheet = document.createElement('style');
styleSheet.type = 'text/css';

if (styleSheet.styleSheet) {
  styleSheet.styleSheet.cssText = styles;
} else {
  styleSheet.appendChild(document.createTextNode(styles));
}

document.head.appendChild(styleSheet);

在上面的代码中，我们首先定义了一些 CSS 样式，然后使用 document.createElement() 方法创建了一个 <style> 标签，并设置了其 type 属性为 text/css。接下来，我们使用条件语句判断浏览器是否支持该方式动态插入 CSS 样式，然后使用 .cssText 或 .appendChild() 方法将样式文本添加到样式表中。

结论

通过上述方法，我们可以轻松地使用 JavaScript 动态加载 CSS 文件，在实现网页样式控制的同时，也提高了网站的灵活性和交互性。