JavaScript中引用外部CSS文件

<html>
<head>
    <meta charset="utf-8">
	<link rel = "stylesheet" href="mycss.css" type="text/css" />
	<title>测试外部css</title>
	<script language="javascript">
		
		function changcolor(obj){
			var ocssRules = document.styleSheets[0].rules;//这里的0表示引用的第1个css文件,.rules返回所有的规则
			var styleobj = ocssRules[0];//这里的0表示第1个规则
			for(key in styleobj){
				document.writeln(key + "=" + styleobj[key]+"<br>");
			}
			if(obj.value == "红色"){
				styleobj.style.backgroundColor="red";
			}else{
				styleobj.style.backgroundColor="black";
			}
		}
	</script>
</head>
<body>
	<div id = "div1" class="style">div</div>
	<input type = "button" value="红色" onclick="changcolor(this)">
	<input type = "button" value="黑色" onclick="changcolor(this)">
</body>
</html>


css文件为mycss.css:

.style{
	width:600px;
	height:300px;
	background-color:red;
}
#people{
	width:300px;
}
.card{
	width:123px;
	height:444px;
}


你可能感兴趣的:(JavaScript中引用外部CSS文件)