CSSRules пуст - PullRequest
Новая
       12

CSSRules пуст

4 голосов
/ 03 июня 2010

У меня есть эта очень простая HTML-страница, и я пытаюсь получить CSSRules #poulet, но когда я обращаюсь к documents.styleSheets [0] .cssRules, я получаю эту ошибку в Chrome v5.0.375.55 :
Uncaught TypeError: Невозможно прочитать свойство 'length' с нулевым значением

Вот как выглядит мой код:

ФАЙЛ HTML 

<!DOCTYPE html> 
<html lang="en"> 
<head>
<link rel="stylesheet" href="css/test.css" type="text/css" />
<script type="text/javascript" src="js/test.js"></script>
<title>Mozilla</title>
<script>
window.onload = function(){
    var test = findKeyframesRule('poulet');
    alert(test);
}
</script>
</head>
<body>
    <div id="poulet">
        allo
    </div>
</body>
</html>

JS FILE 

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;
}

CSS FILE 

html, body {
    background: #cccccc;
}

#poulet{
    border: 10px solid pink;
}

Файлы можно найти здесь . Мне действительно нужна помощь, пожалуйста !!! D:

Ответы [ 3 ]

3 голосов
/ 03 июня 2010

Я нашел эти ошибки в вашем скрипте:

  1. Вы проверяете тип, равный window.CSSRule.WEBKIT_KEYFRAMES_RULE. Это свойство имеет значение 8, тогда как требуемый объект имеет тип 1. Быстрый просмотр объекта CSSRule показывает, что вы, вероятно, хотите сравнить с window.CSSRule.STYLE_RULE.

  2. Я не смог найти свойство name, но в итоге нашел свойство selectorText, содержащее #poulet.

После исправлений сценарий гласит: 

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;
}

Но остерегайтесь проблемы, о которой я говорил в комментарии: это работает только тогда, когда protocol != "file:",

2 голосов
/ 03 июня 2010

Этот метод возвращает массив правил, которые содержат данный селектор-

для корректной работы IE, тест селектора должен быть без учета регистра.

Кстати, Chrome 5 будет работать с правилами или cssRules. 

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;
}

предупреждение (findRule ( 'тело'). Присоединиться ( '\ п \ п'))

Примечание - может быть вам полезно -

Если я запускаю это в каталоге на моем c-диске, я не могу прочитать длину или правила таблицы стилей если они не находятся в том же каталоге, что и страница.

Работает нормально, когда подается через http- с локального хоста или из интернета.

0 голосов
/ 03 июня 2010

Chrome использует массив rules[], как IE. 

document.styleSheets[0].rules.length

Так измените ваш цикл: 

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];
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...