java script css_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方法。

#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);

}

}