在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}