DOCTYPE ломает style.display

Question

У меня есть (устаревшая) JS-функция, которая показывает или скрывает дочерние узлы элемента аргумента.Он используется в обработчиках событий mouseover и mouseout для отображения-скрытия тегов img.Функция выглядит следующим образом:

function displayElem(elem, value, handlerRoot){
try{
    var display = 'inline';
    if(!value)
        display = 'none';
    if(handlerRoot)
        elem.style.display = display;
    var childs = elem.childNodes;
    for (i = 0; i < childs.length; i++){
        if(childs[i].nodeType == Node.ELEMENT_NODE){
            childs[i].style.display = display;
            alert("Node "+childs[i].tagName+" style set to " +childs[i].style.display);
        }
    }
}catch(e){
    alert('displayElem: ' + e);
}
}

Здесь value и handlerRoot - логические флаги.Эта функция отлично работает, если целевая html-страница не имеет типа документа.Добавление любого типа документа (строгого или переходного) нарушает это.Оповещение показывает, что для стиля установлено правильное значение, но дочерние элементы не отображаются.
Было бы хорошо, если бы эта функция могла работать с любым DOCTYPE.

Изображение (дочерний узел elem)инициализируется следующим образом (возможно, здесь что-то не так?):

var img = new Image();
img.style.cssText =
'background: transparent url("chrome://{appname}/content/dbutton.png") right top no-repeat;' +
'position: relative;' +
'height:18px;'+
'width:18px;'+
'display:none;';

Answer 1

JavaScript на самом деле не работает с обычным HTML, а с деревом DOM, сгенерированным браузером.Таким образом, DOCTYPE не имеет прямого влияния на JavaScript, а на то, как браузер обрабатывает недопустимые HTML и CSS.

Я думаю, что первый шаг - это очистить HTML и убедиться, что он действителен, особенно.что теги используются в разрешенных местах и ​​правильно вложены.Это гарантирует, что сгенерированное дерево узлов будет одинаковым независимо от режима рендеринга.

Вы также можете использовать ваш любимый инструмент браузера (например, Firebug), чтобы проверить реальное дерево и убедиться, что узлы размещены там, где вы думаетеони есть.

Answer 2

Обновление

Интересно, если при работе с документом в стандартном режиме (документ имеет DOCTYPE), Firefox вставляет подразумеваемый элемент, который он не вставляет в режиме обратного сжатия (без DOCTYPE), и поэтому изображение не ' t непосредственный дочерний элемент elem, но вместо этого дочерний элемент этого подразумеваемого элемента, который затем является дочерним элементом elem; так что вы не увидите изображение в elem.childNodes. Прохождение кода в отладчике - лучший способ сказать, но если это не удастся, предупредите tagName о каждом из дочерних узлов, через которые вы перебираете цикл.

Например, с такой разметкой:

<table id='theTable'>
    <tr><td>Hi there</td></tr>
</table>

... Firefox вставит элемент tbody, поэтому DOM выглядит так:

<table id='theTable'>
    <tbody>
        <tr><td>Hi there</td></tr>
    </tbody>
</table>

... но это будет не тот конкретный пример, если DOCTYPE не является красной сельдью, потому что я только что протестировал, и Firefox делает это даже в режиме обратного компатирования. Но, возможно, вы тестировали два немного разных документа? Или, возможно, он делает это с некоторыми элементами только в стандартном режиме.

---

Оригинал

Не сразу вижу проблему, но я вижу две проблемы:

1. i не объявлено в функции, и поэтому вы становитесь жертвой Ужаса неявных глобалов . Поскольку в вашем предупреждении указано правильное значение, я не понимаю, с чем это связано.
2. url(..) в CSS не использует кавычки. Да, они могут , опционально.

Answer 3

Благодаря Альваро Г. Викарио.Хотя он не дал точного ответа, направление было правильным.Я проверил страницу с помощью валидатора w3c и обнаружил, что в моих объектах Image отсутствует атрибут src.Таким образом, добавление img.src = "chrome://{appname}/content/dbutton.png"; помогло.

Тем не менее, я не уверен, почему автор оригинального кода использовал стиль background вместо src ... Возможно, это останется загадкой.:)