动态调用CSS文件的JS代码

动态调用 CSS 文件的 JS 代码是一种在页面加载时引入 CSS 文件的方式，这种方式可以使页面的开发更加灵活，可以根据不同的需求加载不同的 CSS 文件。下面是实现动态调用 CSS 文件的 JS 代码的完整攻略：

动态调用 CSS 文件的 JS 代码是一种在页面加载时引入 CSS 文件的方式，这种方式可以使页面的开发更加灵活，可以根据不同的需求加载不同的 CSS 文件。下面是实现动态调用 CSS 文件的 JS 代码的完整攻略：

1. 创建一个空的 link 元素

在页面中创建一个空的 link 元素，它的 href 属性指向 CSS 文件的路径，rel 属性为 stylesheet，type 属性为 text/css。这个 link 元素用来引入 CSS 文件。

<link id="dynamic-css" href="" rel="stylesheet" type="text/css">

在上面的代码中，id 属性可以为这个 link 元素设置一个唯一的 ID 值，以便稍后通过 JS 代码来引用它。

1. 使用 JS 代码动态加载 CSS 文件

使用 JS 代码来动态加载 CSS 文件，可以通过设置 link 元素的 href 属性来实现。下面是一个示例代码，它可以根据用户的选择加载不同的 CSS 文件。

const css = document.getElementById('dynamic-css');
const option = document.getElementById('theme-selector').value;
css.href = `/style/${option}.css`;

在上面的代码中，首先获取了之前创建的 link 元素，然后根据用户的选择来设置 CSS 文件的路径，最后将路径设置为 link 元素的 href 属性。当用户选择不同的主题时，此代码将动态更新页面上的 CSS 文件，从而实现动态调用 CSS 文件的效果。

另一个示例代码，可以在页面加载时调用一个特定的 CSS 文件。

window.addEventListener('load', function() {
  const css = document.getElementById('dynamic-css');
  css.href = '/style/default.css';
});

在上面的代码中，页面加载时会触发 load 事件，当事件发生时，取得之前创建的 link 元素，将 CSS 文件的路径指定为“/style/default.css”，从而实现将特定的 CSS 文件加载到页面中。

总结：通过创建一个空的 link 元素，使用 JS 代码动态设置 link 元素的 href 属性，就可以在页面加载时动态调用 CSS 文件，从而实现更灵活的页面开发。