Ahora que queda claro que cssRules tiene problemas, un par de tips:
Obtener los estilos computados:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<style>
#pp{background-color:red; width:100px; height:100px;}
</style>
<script>
function t(id){return document.getElementById(id);}
function css(id,prop){
if(window.getComputedStyle){
return document.defaultView.getComputedStyle(t(id),null).getPropertyValue(prop);
}else{
var re = /(-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return t(id).currentStyle[prop] ? t(id).currentStyle[prop] : null;
}
}
onload=function(){
var color=css('pp','background-color');
alert(color);
}
</script>
</head>
<body>
<div id="pp"></div>
</body>
</html>
Agregar una nueva hoja de estilos:
Código PHP:
<script>
function loadCss(css) {
if(document.getElementById('estilos'))
document.getElementsByTagName('head')[0].removeChild(document.getElementById('estilos'));
var x = document.createElement("link");
x.rel="stylesheet";
x.href=css;
x.id="estilos";
document.getElementsByTagName('head')[0].appendChild(x);
}
window.onload=function(){loadCss('estilos_1.css');}
</script>
Agregar cualquier regla en cualquier momento:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
<script>
function addCss(cssCode,i) {
control=document.getElementById(i)
if(control)
document.getElementsByTagName("head")[0].removeChild(control)
var styleElement = document.createElement("style");
styleElement.type = "text/css";
if (styleElement.styleSheet) {
styleElement.styleSheet.cssText = cssCode;
} else {
styleElement.appendChild(document.createTextNode(cssCode))
}
styleElement.id =i;
document.getElementsByTagName("head")[0].appendChild(styleElement);
}
onload=function(){
addCss('#pp{background-color:red; width:100px; height:100px;}',new Date().getTime());
}
</script>
</head>
<body>
<div id="pp"></div>
</body>
</html>