javascript访问修改样式表，可以方便的动态修改页面：
准备部分
如何理解事件驱动机制不同浏览器兼容
<scriptlanguage="javascript">
<!--
if(window.XMLHttpRequest){//Mozilla,Safari,IE7,IE8
if(!window.ActiveXObject){//Mozilla,Safari
alert("Mozilla,Safari");
}else{
alert("IE");
}
}else{
alert("IE6");
}
//-->
</script>
1、访问元素中style属性的CSS样式
这个可以直接使用style对象方便的访问，例如：
<div id="mdiv"style="background-color:blue;">...</div>
访问CSS的方法是：
<scripttype="text/javascript">
//获得元素
varoDiv=document.getElementById("mdiv");
//访问元素的style对象，再访问对象中的属性，也可以修改属性的值，直接为他赋值
alert(oDiv.style.backgroundColor);
</script>
具体的代码有：
<html>
<head>
<title>js事件驱动机制示例</title>
<script language="javascript" src="myfun.js"></script>
<script language="javascript" type="text/javascript">
function test1(){
window.alert(new Date().toLocaleString());
}
function test2(e){
//alert(e.value);可以拿到红色与黑色
var div1=document.getElementById('div1');
if(e.value=="黑色"){
//获取div1
div1.style.backgroundColor="black";
}else if(e.value=="红色"){
// div1.style.background-color="red";//这里要区别
div1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<input type="button" onclick="test1()" value="点击查看当前时间"/>
<!--如何通过修改style改变style-->
<div id="div1" style="width:400px;height:300px;background-color:red">div1</div>
<input type="button" value="黑色" onclick="test2(this)" />
<input type="button" value="红色" onclick="test2(this)" />
</body>
</html>
2、访问外部定义的CSS样式(类定义的CSS样式)
<span style="font-size:10px;"><html>
<head>
<title>js事件驱动机制示例</title>
<script language="javascript" src="myfun.js"></script>
<link href="my.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">
function test1(e){
//获取样式表my.css中所有class选择器
var ocssRules=document.styleSheets[0].rules;//IE浏览器下获取
//var ocssRules=document.styleSheets[0].cssRules;FF浏览器下获取
var ocss=document.styleSheets[0].rules;//这里在360浏览器出问题在ie下是正常的
//从coss中取出你希望的class
//coss[0]中的0表示my.css中第一个规则
var style1=ocss[0];
if(e.value=="黑色"){
style1.style.backgroundColor="black";
}else if(e.value=="红色"){
style1.style.backgroundColor="red";
}
}
</script>
</head>
<body>
<!--如何通过修改style改变style-->
<div id="div1" class="style1" >div1</div>
<input type="button" value="黑色" onclick="test1(this)" />
<input type="button" value="红色" onclick="test1(this)" />
</body>
</html></span>
其中的css文件为：
.style1{
width:600px;
height:400px;
background-color:black;
}