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';
四、添加style标签与内容
五、修改element.className来修改对应样式