CSS样式操作详解-优快云博客

CSS样式分为三种，行内样式、内部样式、外部样式。

一、element.style.stylename

　　创建、获取、修改行内样式

console.log(document.getElementById("testcss0").style.backgroundColor);//""
document.getElementById("testcss0").style.backgroundColor = "black";
console.log(document.getElementById("testcss0").style.backgroundColor);//"black"

二、element.currentStyle 和 element.getComputedStyle

　　获取非行内样式

三、element.styleSheets[i].rules[j].style.stylename （IE）和 element.styleSheets[i].cssRules[j].style.stylename （firefox）

　　创建、获取、修改非行内样式

　　document.styleSheets[i].rules[j].selectorText //selectorText 属性获取选择器，例如“#testcss0”

<!DOCTYPE HTML>
<html>
<head>
<meta  charset=utf-8" />
<link type="text/css" rel="stylesheet" href="test.css"  />
<style type="text/css">
#testcss1{
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
</style>
</head>
<body>
<div id="testcss0"></div>
<div id="testcss1"></div>
</div>
<script>
　　//IE
   //document.styleSheets[0].rules[0].style.width = "100px"; 
   //document.styleSheets[1].rules[0].style.width = "100px";
   //var selectorText = document.styleSheets[0].rules[0].selectorText;     //selectorText获取选择器，例如这里是“#testcss0”

　　//firefox
    document.styleSheets[1].cssRules[0].style.width = "100px";
    document.styleSheets[1].cssRules[0].style.backgroundColor = "yellow";
    console.log( document.styleSheets[1].cssRules[0].style.width);         //"100px"
    var selectorText = document.styleSheets[1].cssRules[0].selectorText;  
　　console.log(selectorText);                                             //"#testcss1"

</script> 
</body> 
</html>

可以封装一个函数来获取特定元素的style对象：

function getstyle(sname) { 
    for (var i=0; i<document.styleSheets.length;i++) { 
        var rules; 
        if (document.styleSheets[i].cssRules) { 
            rules = document.styleSheets[i].cssRules; 
        }
        else { 
            rules = document.styleSheets[i].rules; 
        } 
        for (var j=0;j<rules.length;j++) { 
            if (rules[j].selectorText == sname) {  
                return rules[j].style; 
            } 
        } 
    } 
} 

使用示例：
getstyle(#testcss0).padding = '10px';