javascript怎么访问样式表(classname与display属性)

发布时间:2019-08-12编辑:脚本学堂
有关javascript访问样式表的方法,动态控制样式表,以及javascript控制sytle属性、className属性、display属性、滚动条样式的方法,需要的朋友参考下。

一、动态控制样式表
javascript中,有两种方式可以动态的改变样式属性,一种是使用style属性,另一种是使用样式的classname属性。

另外,控制元素隐藏和显示使用display属性。

1、使用sytle属性

语法:
元素.style.样式属性="值";
在javascript中使用css样式与在html中使用css少有不同,由于javascript中的-表示减号,因此如果样式属性名称中带有"-"则要省去,后面首字母要大写。

二、css样式属性

例如:
 

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>随鼠标滚动的广告图片 - www.plcxue.com</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>