动态控制样式表
在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方法。
#adv{position:absolute;top:20px;left:30px;width:100px;height:100px;background-color:red;
}
functiontest(){varadv=document.getElementById("adv");//alert(adv.style.left + " " + adv.style.top); //如果不是行内样式,则style无效
//如果是IE浏览器
if(adv.currentStyle){
alert("IE浏览器:" +adv.currentStyle.left+ " " +adv.currentStyle.top);
}else{varleft=document.defaultView.getComputedStyle(adv,null).left;vartop=document.defaultView.getComputedStyle(adv,null).top;
alert("非IE浏览器:" +left+ " " +top);
}
}