用js控制样式

用js控制样式：

1、style方式：

var obj = document.getElementById("oDiv");
obj.style.border= "1px solid red";

2、cssText方式：

var obj = document.getElementById("oDiv");
obj.style.cssText= "border:1px solid red";

前者有严重的兼容问题。如float这个样式，在IE是styleFloat，在火狐等W3C标准游览器是cssFloat。而cssText则通吃。

3、动态创建<style>方式

function addCssByStyle(cssString){
var doc=document;
var head = doc.getElementsByTagName("head")[0];
var style = head.getElementsByTagName("style");

if(style.length==0){
style = doc.createElement("style");
style.setAttribute("type", "text/css");
};

if(style.styleSheet){ // IE
style.styleSheet.cssText += cssString;
} else if(document.getBoxObjectFor){ //火狐
style.innerHTML += cssString;
}else { // w3c
var cssText = doc.createTextNode(cssString);
style.appendChild(cssText);
}
doc.getElementsByTagName("head")[0].appendChild(style);
}

4、动态的导入css文件( <link>方式 )：

function addSheetFile(path){
var s=document.createElement("link")
s.rel = "stylesheet";
s.type = "text/css";
s.href = path;
var headobj = document.getElementsByTagName('head')[0];
headobj.appendChild(s);
}

ie中可以更简单：

var s= document.createStyleSheet ( sURL , index );

参数解析:

url:可选，规定引入css文件的url地址。
index:可选，规定在styleSheets集合中的索引位置，默认是最后一个。

5、js获取行间样式

var h = obj.style.height

6、获取计算后的样式

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}