js中动态引入css样式文件

function loadStyles(url) {var link = document.createElement("link");link.rel = "stylesheet";link.type = "text/css";link.href = url;var head = document.getElementsByTagName("head")[0];head.appendChild(link);
}

使用：

loadStyles("framework/css/blue.css");

 

实例：

点击换肤按钮可以变换三套皮肤

代码实现：

<script type="text/javascript">var flag = 0;for(var i = 0; i < 3; i++) {$(".change-skin p").eq(i).click(function() {if(flag == 0) {loadStyles("framework/css/orange.css");flag = 1;} else if(flag == 1) {loadStyles("framework/css/cyan.css");flag = 2;} else if(flag == 2) {loadStyles("framework/css/blue.css");flag = 0;}});}function loadStyles(url) {var link = document.createElement("link");link.rel = "stylesheet";link.type = "text/css";link.href = url;var head = document.getElementsByTagName("head")[0];head.appendChild(link);}</script>