使用 JavaScript 附加 CSS 文件

在 web 开发中，我们经常会需要在页面中动态添加 CSS 样式。使用 JavaScript 可以轻松实现这一功能。

方法一：动态创建 style 标签

我们可以通过 JavaScript 动态创建一个 style 标签，然后通过设置 style 标签内的 innerHTML 属性来添加 CSS 样式。

let styles = `
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
  }
`;

let style = document.createElement('style');
style.innerHTML = styles;
document.head.appendChild(style);

方法二：动态附加 link 标签

我们还可以使用 JavaScript 动态附加一个 link 标签来引入 CSS 文件。

let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/styles.css';
document.head.appendChild(link);

注意事项

• 通过动态创建 style 标签添加的样式会覆盖页面中已有的样式。
• 通过动态附加 link 标签引入的 CSS 文件需要保证正确性，否则会导致页面显示异常。
• 在动态添加样式时需要注意避免命名冲突以及提高代码的可维护性。

以上就是使用 JavaScript 附加 CSS 文件的方法，希望对你有帮助！