Java Script基础（十） 访问样式表
动态控制样式表
在JavaScript中，有两种方式可以动态的改变样式属性，一种是使用style属性，另一种是使用样式的className属性。另外控制元素隐藏和显示使用display属性。
1、使用sytle属性
语法：
元素.style.样式属性="值";
在JavaScript中使用CSS样式与在html中使用CSS少有不同，由于JavaScript中的-表示减号，因此如果样式属性名称中带有"-"则要省去，后面首字母要大写。
例如：
document.getElementById("title").style.fontSize="14px"; //更改title标签字体为14号
document.getElementById('id1').style.color='red'; //设置id1字体为红色
这种方式只能获取行内样式属性，如果要获取外部样式和内部样式属性。如果是IE浏览器需要使用currentStyle对象，如果是firefox使用getComputedStyle方法。
<style type="text/css">
#adv {
position: absolute;
top: 20px;
left: 30px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<script type="text/javascript">
function test(){
var adv = document.getElementById("adv");
//alert(adv.style.left + " " + adv.style.top); //如果不是行内样式，则style无效
//如果是IE浏览器
if(adv.currentStyle){
alert("IE浏览器:" +adv.currentStyle.left + " " + adv.currentStyle.top);
}else{
var left = document.defaultView.getComputedStyle(adv,null).left;
var top = document.defaultView.getComputedStyle(adv,null).top;
alert("非IE浏览器:" + left + " " + top);
}
}
</script>
<input type="button" value="移动div" onclick="test()" />
<div id="adv" style=""></div>
2、使用className属性
语法：
元素.className="类样式";
这种方式需要预先定义好类样式，然后赋值给className属性。复用性更好。
document.getElementById('id1').className='red'; //为id1添加类样式
3、display属性
语法：
元素.display = "值"
这里的值为css中display的属性值，none隐藏，block块显示，inline行显示。
<script language="JavaScript">
function show(str){
var i=documeng.getElementById(str);
if (i.style.display == "none") {
i.style.display = "";
}
else{
i.style.display = "none";
}
}
</script>
4、滚动条
属性：
scrollLeft：水平滚动的距离；
scrollTop：垂直滚动的距离；
事件：
onscroll：滚动事件
注意：在chrome下，document.body.scrollTop能读出正常值，但是在ie6 和 firefox里，document.body.scrollTop的值始终为0，于是在网上搜索办法。原来是DTD的问题,要是页面直接用<html>开头的话就没有问题了。但是要符合web标准,DTD当然是不能少的。用document.documentElement.scrollTop可以解决这个问题。但又一个问题是，chrome并不认同ocument.documentElement.scrollTop这种写法，
实现页面滚动的广告图片：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>随鼠标滚动的广告图片</title>
<style type="text/css">
#main { text-align: center; }
#adver {
position: absolute;
left: 50px;
top: 30px;
z-index: 2;
}
</style>
<script type="text/javascript">
var adverTop; //层距页面顶端距离
var adverLeft;
var adverObject; //层对象
function inix(){
adverObject=document.getElementById("adver"); //获得层对象
if(adverObject.currentStyle){
adverTop=parseInt(adverObject.currentStyle.top);
adverLeft=parseInt(adverObject.currentStyle.left);
}
else{
adverTop=parseInt(document.defaultView.getComputedStyle(adverObject,null).top);
adverLeft=parseInt(document.defaultView.getComputedStyle(adverObject,null).left);
}
}
function move(){
adverObject.style.top=adverTop+parseInt(document.documentElement.scrollTop || document.body.scrollTop)+"px";
adverObject.style.left=adverLeft+parseInt(document.documentElement.scrollLeft || document.body.scrollLeft)+"px";
}
window.onload=inix;
window.onscroll=move;
</script>
</head>
<body>
<div id="adver"><img src="images/adv.jpg"/></div>
<div id="main"><img src="images/main1.jpg"/><img src="images/main2.jpg"/><img src="images/main3.jpg"/></div>
</body>
</html>
