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

Question

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

目标是让项目根据其他项目的选择动态隐藏或显示。通常，我只需在display：none和display：block之间切换，但对于另一位开发人员的工作，我可以使用display：none来隐藏该字段，但切换到显示：block会拧紧布局。解决方法是简单地撕掉样式中的显示设置，或者完全拆除样式。不幸的是，我跑进图书馆问题

Firefox支持到目前为止的所有 我试着IE8 & 6不支持的getElementById（）。style.removeProperty（ '显示'） 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

使用一个JavaScript库，如jQuery，它已将所有浏览器兼容性问题分类并提取出去。

从它似乎支持你所需要的一切的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没有（至少，它没有声称，我们知道谷歌在其大多数产品中都没有支持IE6的支持），但它是我知道的第一个与IE6再见的大型图书馆。

Answer 3

改为使用类。如果你只是你的元素上使用一个类，它是如此简单：

CSS：

*.hidden { 
    display: none; 
} 

的JavaScript：

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

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

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

Answer 4

你仍然可以切换显示之间：块/无; 通过条件注释或IE特定的黑客来解决您的布局问题。 因此可以说，你已经设置了宽度为200px的id uSub0。并在IE中破解，你需要它为190px。继承人如何瞄准他们。例如：

uSub0 {宽度：200像素}

/** IE6仅**/

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

/** IE7仅**/

uSub0 {宽度：200像素}

：第一胎+ HTML＃uSub0 {宽度：190px} / * IE7只有**/

uSub0 {宽度：200像素}

+ HTML＃uSub0 {宽度：190px} / * IE6，IE7，IE8 **/

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

/** IE7，IE8 **/

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