学习下如何在js代码中,访问外部css文件中的样式。
1,css文件 event3.css
2,html文件 event3.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="event3.css">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript">
function test(){
window.alert(new Date().toLocaleString());
}
//访问外部定义的CSS样式(类定义的CSS样式)
function test2(eventObj){
//获取event.css中所有class选择器都获取
//注意:Mozilla和Safasi中是cssRules,而IE中是rules
var ocssRules=document.styleSheets[0].rules;
//从ocssRules中取得你需要的class
var mydiv=ocssRules[0]; //这个0是表示是event3.css文件中的第一个规则
if(eventObj.value=="黑色"){
//通过Id来区分进行操作
var div1=document.getElementById("div1");
div1.style.backgroundColor="black";
}else if(eventObj.value=="红色"){
var div1=document.getElementById("div1");
//div1.style.background-color="balck"; //这样写是错的
div1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<input type="button" value="点击显示时间" onclick="test()" />
<div id="div1" class="mydiv">
</div>
<input type="button" value="黑色" onclick="test2(this)"/>
<input type="button" value="红色" onclick="test2(this)"/>
</body>
</html>