Удаление атрибута стиля в IE6, 8 и Firefox

Question

Я пытаюсь работать с Javascript через кросс-браузерную платформу, которая необходима для поддержки IE6, 8 и Firefox. Я быстро обнаружил, что ни один из этих браузеров не содержит подходящей библиотеки Javascript.

Цель состоит в том, чтобы иметь элементы, которые динамически скрываются или отображаются в зависимости от выбора других элементов. Обычно я просто переключаю между display: none и display: block, но для работы другого разработчика я могу использовать display: none, чтобы скрыть поле, но переключаюсь на display: block портит структуру. Решение состоит в том, чтобы просто вырвать либо настройку дисплея в стиле, либо полностью вырвать стиль. К сожалению, я столкнулся с проблемой библиотеки

Firefox поддерживает все, что я пробовал до сих пор IE8 и 6 не поддерживают getElementById (). Style.removeProperty ('display') IE6 не поддерживает getElementById (). RemoveAttribute ('style')

Ниже приведен мой код, работающий в IE8 и FF ... но он также должен работать в IE6.

function displayPrevLPQ(bShow) {
    if (bShow) {
        document.getElementById('prevLPQ').removeAttribute('style');
    } else {
        document.getElementById('prevLPQ').style.display = 'none';
    }
}

function displayBusUnitSub() {
    var buVal = document.getElementById('BusinessUnitID').value;
    document.getElementById("BusinessCycle").selectedIndex = document.getElementById("BusinessCycle").getAttribute("default");
    document.getElementById("Ibap").selectedIndex = document.getElementById("Ibap").getAttribute("default");
    document.getElementById("Bca").selectedIndex = document.getElementById("Bca").getAttribute("default");

    switch (buVal) {
        case '11':
            document.getElementById('buSub0').style.display = 'none';
            document.getElementById('buSub1').removeAttribute('style');
            document.getElementById('buSub2').style.display = 'none';
            break;
        case '1':
            document.getElementById('buSub0').style.display = 'none';
            document.getElementById('buSub1').style.display = 'none';
            document.getElementById('buSub2').removeAttribute('style');
            break;
        default:
            document.getElementById('buSub0').removeAttribute('style');
            document.getElementById('buSub1').style.display = 'none';
            document.getElementById('buSub2').style.display = 'none';
            break;
    }
}

Итак, вопрос в том ... как я могу выделить свойства Style или display так, чтобы они работали во всех трех браузерах?

Заранее спасибо.

Answer 1

Используйте библиотеку javascript, например jQuery , в которой уже устранены и устранены все проблемы совместимости браузера.

Из документов кажется, что он поддерживает все, что вам нужно:

jQuery поддерживает следующие браузеры:

* Firefox 2.0+
* Internet Explorer 6+
* Safari 3+
* Opera 9+
* Chrome 1+ 

Что касается конкретной функции jQuery для этого - посмотрите на .toggle().

Answer 2

вы все еще можете переключаться между дисплеем: блок / нет;предназначайтесь для IE через условные комментарии или специальные взломы IE, чтобы исправить проблемы с макетом.так скажем, что у вас есть ширина, установленная на id uSub0 200px.и его разрыв в IE, вам нужно, чтобы он был 190px для них.вот как вы можете нацелить их.пример:

uSub0 {width: 200px}

/ ** ie6 only ** /

uSub0 {width: 200px;* width: 190px}

/ ** ie7 только ** ** /

uSub0 {width: 200px}

: первый ребенок + html # uSub0 {width: 190px} / * только ie7 ** /

uSub0 {ширина: 200px}

+ html # uSub0 {ширина: 190px} / * ie6,ie7, ie8 ** /

uSub0 {width: 200px;ширина: 190px \ 9}

/ ** ie7, т.е. 8 ** /

uSub0 {ширина: 200px;ширина / * /: 190px}

Answer 3

Используйте вместо этого класс. Если вы используете только один класс для вашего элемента, это так просто:

CSS:

*.hidden {
   display: none;
}

JavaScript:

function show(el) {
    el.className = "";
}

function hide(el) {
    el.className = "hidden";
}

show(document.getElementById("foo"));

Answer 4

... требуется для поддержки IE6, 8 и Firefox.Я быстро обнаружил, что ни один из этих браузеров не содержит соответствующей библиотеки Javascript.

jQuery , Prototype и YUI всеподдерживать эти три браузера (и более).Я ожидаю многие из этих тоже. Закрытие нет (по крайней мере, он не претендует на это, и мы знаем, что Google прекратил поддержку IE6 в большинстве своих продуктов), но это первая из известных мне крупных библиотек, которая прощается с IE6.