CSSRules está vacío

Tengo esta página HTML muy simple, y estoy tratando de obtener las CSSRules de #poulet, pero cuando estoy accediendo a las documents.styleSheets [0] .cssRules recibo este error en Chrome v5.0.375.55:
Unkeught TypeError: no se puede leer la propiedad ‘length’ de null

Aquí está mi código:

ARCHIVO HTML

     Mozilla  window.onload = function(){ var test = findKeyframesRule('poulet'); alert(test); }    
allo

ARCHIVO JS

 function findKeyframesRule(rule) { var ss = document.styleSheets; for (var i = 0; i < ss.length; ++i) { for (var j = 0; j < ss[i].cssRules.length; ++j) { if (ss[i].cssRules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && ss[i].cssRules[j].name == rule) return ss[i].cssRules[j]; } } return null; } 

ARCHIVO CSS

 html, body { background: #cccccc; } #poulet{ border: 10px solid pink; } 

Los archivos se pueden encontrar aquí . Realmente necesito ayuda en este caso, por favor! RE:

Encontré estos errores en tu script:

  1. Está probando que el tipo sea igual a window.CSSRule.WEBKIT_KEYFRAMES_RULE . Esa propiedad tiene un valor de 8, mientras que el objeto deseado tiene un tipo de 1. Un vistazo rápido en el objeto CSSRule revela que probablemente desee comparar con window.CSSRule.STYLE_RULE .

  2. No pude encontrar el name una propiedad, pero al final encontré un selectorText propiedadesText que contiene #poulet .

Después de las correcciones, el script lee:

 function findKeyframesRule(rule) { var ss = document.styleSheets; for (var i = 0; i < ss.length; ++i) { for (var j = 0; j < ss[i].cssRules.length; ++j) { if (ss[i].cssRules[j].type == window.CSSRule.STYLE_RULE && ss[i].cssRules[j].selectorText == '#'+rule) return ss[i].cssRules[j]; } } return null; } 

Pero ten cuidado con el problema que mencioné en un comentario: esto solo funciona cuando protocol != "file:" ,

Este método devuelve una matriz de reglas que contienen un selector dado-

para trabajar correctamente IE, la prueba del selector debe ser insensible a las mayúsculas y minúsculas.

Chrome 5 funcionará con reglas o cssRules, por cierto.

 function findRule(rule){ var ss= document.styleSheets, L= ss.length, A= [], R, RL, ru; var rx= RegExp('\\b'+rule+'\\b','i'); for(var i= 0; i < L; ++i){ R= ss[i].cssRules || ss[i].rules, RL= R.length; while(RL){ ru= R[--RL]; if(rx.test(ru.selectorText)){ A.unshift(ru.selectorText+'{'+ru.style.cssText+'}'); } } } return A; } 

alerta (findRule ('cuerpo'). join ('\ n \ n'))

Nota: puede ser útil para usted-

Si ejecuto esto en un directorio en mi c-drive no puedo leer ninguna longitud o reglas de styleSheet a menos que estén en el mismo directorio que la página.

Funciona bien cuando se sirve a través de http- desde localhost o internet.

Chrome usa el conjunto de rules[] como IE.

 document.styleSheets[0].rules.length 

Así que modifica tu ciclo:

 for (var i = 0; i < ss.length; ++i) { var rules = ss[i].cssRules; if (!rules) rules = ss[i].rules; for (var j = 0; j < rules.length; ++j) { if (rules[j].type == window.CSSRule.WEBKIT_KEYFRAMES_RULE && rules[j].name == rule) return rules[j]; } }