在IE6、8和Firefox中删除样式属性

Question

I'm attempting to work with Javascript through a cross browser platform that is required to support IE6, 8, and Firefox. I've quickly discovered that none of these browsers contain a matching Javascript library.

The goal is to have items that dynamically hide or show depending on the selection of other items. Normally I would just toggle between display:none and display:block but for the work of another developer, I can use the display:none to hide the field, but switching to display:block screws up the layout. The solution is to simply rip out either the display setting in the style, or tear out the style altogether. Unfortunately, I ran into the library problem

Firefox supports everything I've tried so far IE8 & 6 didn't support getElementById().style.removeProperty('display') IE6 doesn't support getElementById().removeAttribute('style')

Below is my code as it currently is, working in IE8 and FF...but it is required to also get it working in 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;
    }
}

So, the question is...how can I tear out the Style or display properties in a way that will work across all three browsers?

Thanks in Advance.

Answer 1

Use a javascript library like jQuery that already has all the browser compatibility issues sorted and abstracted away.

From the docs it appears to support everything you need:

jQuery supports these browsers:

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

As for the specific jQuery function to to this - look at .toggle() .

Answer 2

...required to support IE6, 8, and Firefox. I've quickly discovered that none of these browsers contain a matching Javascript library.

jQuery , Prototype , and YUI all support those three browsers (and more). I expect many of these others do as well. Closure doesn't (at least, it doesn't claim to and we know Google dropped IE6 support in most of its products), but it's the first major library I know of to wave bye-bye to IE6.

Answer 3

Use a class instead. If you only use one class on your element, it's as simple as this:

CSS:

*.hidden {
   display: none;
}

JavaScript:

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

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

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

Answer 4

you can still toggle between display:block/none; target the IEs via conditional comments or IE specific hacks to fix your layout issues. so lets say that you have width set on id uSub0 of 200px. and its breaking in IEs, you need it to be 190px for them. heres how you can target them. example:

uSub0{width:200px}

/** ie6 only **/

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

/** ie7 only **/

uSub0{width:200px}

:first-child+html #uSub0{width:190px} / * ie7 only **/

uSub0{width:200px}

+html #uSub0{width:190px} / * ie6, ie7, ie8 **/

uSub0{width:200px; width: 190px\\9}

/** ie7, ie8 **/

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