本文介绍如何使用JavaScript根据屏幕宽度动态加载不同的CSS样式表。通过遍历预设的皮肤名称数组，利用document.createElement创建link元素，并根据Swidth判断加载宽屏或标准版CSS，最后将其追加到head中实现响应式样式切换。
JavaScript动态加载CSS样式表的实现方法
具体实现代码如下所示：
<script type="text/javascript" language="javascript">
定义一个包含皮肤名称的数组：var _sn = ["df/common", "df/home2010"];
设定CSS文件的基础URL路径：var _su = "https://www.jb51.net/skin/";
获取当前屏幕宽度并初始化变量：var Swidth = screen.width; var _se, _st;
遍历皮肤名称数组：for (i in _sn) {
创建一个新的link元素节点：_se = document.createElement("link");
设置该元素类型为CSS：_se.type = "text/css";
设置rel属性为stylesheet：_se.rel = "stylesheet";
判断屏幕宽度是否大于等于1280像素：if (Swidth >= 1280) {
若满足条件，拼接宽屏CSS文件名：_st = _su + _sn[i] + ".w.css";
否则执行以下逻辑：} else {
拼接标准版CSS文件名：_st = _su + _sn[i] + ".css";
}
将拼接好的URL赋值给href属性：_se.href = _st;
将link元素追加到head标签中：document.getElementsByTagName("head")[0].appendChild(_se);
}
</script>