js 动态更换CSS文件

最新推荐文章于 2024-06-11 22:02:21 发布

原创最新推荐文章于 2024-06-11 22:02:21 发布 · 484 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文介绍了一种使用JavaScript动态更改网站CSS样式的简单方法。通过一个具体函数实现样式文件的加载和替换，以此来改变网站的主题风格。

初次导入样式：


<link rel="stylesheet" type="text/css" id="uiCss" media="screen" href="${ctx}/css/themes/black-tie/jquery-ui.css" />

通过如下函数，即可实现动态更换CSS效果

	
function loadCss(file){
	    var cssTag = document.getElementById('uiCss');
	    var head = document.getElementsByTagName('head').item(0);
	    if(cssTag) head.removeChild(cssTag);
	    css = document.createElement('link');
	    css.href = "//code.jquery.com/ui/1.10.3/themes/"+file+"/jquery-ui.css";
	    css.rel = 'stylesheet';
	    css.type = 'text/css';
	    css.id = 'uiCss';
	    head.appendChild(css);
	}