动态调用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 文件，从而实现更灵活的页面开发。