event3.css
.mydiv{ width:600px; height:400px; background-color:red; }
event3.html
<html> <head> <link rel="stylesheet" type="text/css" href="event3.css"> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--js代码可以放置在任意位置，按照先后顺序依次执行 一般放在head标签之间--> <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>