js动态加载css文件

最新推荐文章于 2023-07-10 16:44:27 发布

原创最新推荐文章于 2023-07-10 16:44:27 发布 · 222 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #动态 #加载 #css

js 专栏收录该内容

39 篇文章

订阅专栏

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--<link href="test.css" type="text/css" />-->
<script type="text/javascript">

	//动态加载css文件
	function addCss(href) {
		if (isLoadedCss(href)) {
			return;
		}
		var container = document.getElementsByTagName("head")[0];
		var addCss = document.createElement("link");
		//addCss.id = href;
		addCss.rel = "stylesheet";
		addCss.type = "text/css";
		addCss.media = "screen";
		addCss.href = href;
		container.appendChild(addCss);
	}
	//addCss('test.css');

	//判断是否加载过css文件，
	//以下列出4种方法，推荐第一种，或第二种。
	
	//判断是否加载过css,
	function isLoadedCss(href) {
		var links = document.getElementsByTagName("link"); //得到所有的link对象集合
		for (var i = 0; i < links.length; i++) //依次判断每个link对象
		{
			if (links[i].href == href) {
				return true;
			}
		}
		return false;
	}

	var loadedCss = {}; //类似于map
	//判断是否加载过css,
	function isLoadedCss2(href) {
		if (loadedCss[href]) {
			return true;
		} else {
			loadedCss[href] = true;
			return false;
		}
	}
	
	var addedCss = ""; //保存已经绑定文件名字的字符串 
	//判断是否加载过css,
	function isLoadedCss3(href) {
		if (addedCss.indexOf("[" + href + "]") > -1) {// indexOf判断数组里是否有某一项 
			return true;
		} else {
			addedCss += "[" + href + "]"; //把文件名字添加到addedCss 
		}
	}

	//判断是否加载过css,
	function isLoadedCss4(href) {
		var cssTag = document.getElementById(href);
		if (cssTag) {
			return true;
		} else {
			return false;
		}
	}
</script>
</head>
<body>
	<input type="button" onClick="addCss('test.css')" value="测试" />
</body>
</html>

其他相关js

document.getElementById("elementId").style.background="#ff0000";

document.getElementsByTagName("a")[0].style.cssText = "background:#ff0000;border:1px #dfdfdf solid;";