删除IE6,8和Firefox中的样式属性

Question

我正在尝试通过支持IE6,8和Firefox所需的跨浏览器平台使用Javascript。我很快发现这些浏览器都不包含匹配的Javascript库。

目标是根据其他项目的选择动态隐藏或显示项目。通常我只是在display：none和display：block之间切换，但是对于另一个开发人员的工作，我可以使用display：none隐藏字段，但是切换到display：block搞砸了布局。解决方案是简单地撕掉样式中的显示设置，或者完全撕掉样式。不幸的是，我遇到了库问题

Firefox支持到目前为止我尝试过的所有内容 IE8＆amp; 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;
    }
}

所以，问题是......如何以一种适用于所有三种浏览器的方式撕掉样式或显示属性？

先谢谢。

Answer 1

使用像jQuery这样已经排序和抽象出所有浏览器兼容性问题的javascript库。

从docs看来它可以支持您需要的一切：

  

jQuery支持这些浏览器：

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

至于具体的jQuery函数 - 请查看.toggle()。

Answer 2

  

...需要支持IE6,8和Firefox。我很快发现这些浏览器都不包含匹配的Javascript库。

jQuery，Prototype和YUI都支持这三种浏览器（以及更多）。我希望many of these others能做到。 Closure没有（至少，它没有声称并且我们知道Google在其大部分产品中都放弃了IE6支持），但它是我知道的第一个向IE6挥手的主要库。< / p>

Answer 3

改为使用班级。如果你只在元素上使用一个类，它就像这样简单：

CSS：

*.hidden {
   display: none;
}

JavaScript的：

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

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

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

Answer 4

你仍然可以在display：block / none;之间切换。 通过条件评论或IE特定黑客来定位IE，以修复您的布局问题。 所以我们假设您在id uSub0上设置的宽度为200px。并且它在IE中的突破，你需要它为190px。继承人如何定位他们。例如：

uSub0 {宽度：200像素}

/ ** ie6 only ** /

uSub0 {宽度：200像素; *宽度：190px}

/ ** ie7 only ** /

uSub0 {宽度：200像素}

：first-child + html＃uSub0 {width：190px} / * ie7 only ** /

uSub0 {宽度：200像素}

+ html＃uSub0 {width：190px} / * ie6，ie7，ie8 ** /

uSub0 {宽度：200像素;宽度：190px \ 9}

/ ** ie7，ie8 ** /

uSub0 {宽度：200像素; width / * /：190px}