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这种写法，

因此比较兼容的写法是：
     var oscrollTop = document.documentElement.scrollTop || document.body.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>

 

posted on 2014-12-19 16:31  Builder  阅读(713)  评论(0)  编辑  收藏  举报