IE6,8、Firefoxでのスタイル属性の削除

Question

IE6,8、Firefoxをサポートするために必要なクロスブラウザプラットフォームでJavascriptを使用しようとしています。私はすぐに、これらのブラウザのどれにも一致するJavascriptライブラリがないことを発見しました。

目標は、他のアイテムの選択に応じて動的に非表示または表示するアイテムを持つことです。通常はdisplay：noneとdisplay：blockを切り替えるだけですが、別の開発者の作業では、display：noneを使用してフィールドを非表示にしても、表示に切り替えることができます。解決方法は、スタイルの表示設定を切り離すか、スタイルを完全に切り捨てることです。残念ながら、私は

Firefoxがサポートしているライブラリーの問題に走った私は（ '表示'） IE6はgetElementByIdををサポートしていませんがgetElementByIdを（）。style.removePropertyをサポートしていませんでした、これまで IE8 & 6を試みたすべてのもの（） 。私は現在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; 
    } 
} 

だから、質問は、私はすべての3つのブラウザーで動作するように、スタイルや表示プロパティを引き裂くことができる方法ですか...？

ありがとうございました。

Answer 1

jQueryのようなJavaScriptのライブラリを使用して、既にブラウザの互換性の問題をすべてソートして抽象化しています。 docsから

あなたが必要なすべてをサポートするために、表示されます。これまでに具体的なjQueryの機能については

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

から.toggle()を見て：

jQueryのは、これらのブラウザをサポートしています。

Answer 2

... IE6,8、およびFirefoxをサポートする必要があります。私はすぐに、これらのブラウザのどれにも一致するJavascriptライブラリがないことを発見しました。

jQuery、Prototype、およびYUIすべてがこれらの3つのブラウザ（およびそれ以上）をサポートしています。私はmany of these othersも期待しています。 Closure（少なくとも、それは主張していないし、私たちはGoogleがほとんどの製品でIE6のサポートを落としていることを知っている）が、IE6にバイバイを告げるために私が知っている最初の主要なライブラリだ。

Answer 3

代わりにクラスを使用してください。あなただけの要素に1つのクラスを使用する場合は、このような単純なのです：

CSS：

*.hidden { 
    display: none; 
} 

はJavaScript：

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

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

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

Answer 4

それでも表示を切り替えることができます：ブロック/なし; レイアウト上の問題を修正するための条件付きコメントまたはIE固有のハッキングを介してIEをターゲットにします。 だから、あなたは200pxのiduSub0に設定された幅を持っていると言うことができます。それがIEで壊れている場合は、それを190pxにする必要があります。どのようにターゲットを絞ることができるのでしょうか？例：

uSub0 {幅：200pxの}

/** IE6のみ**/

uSub0 {幅：200pxの。 *幅：190px}

/** IE7のみ**/

uSub0 {幅：200pxの}

：最初の子+ HTML＃uSub0 {幅：190px} / * IE7 **/

uSub0 {幅：200pxの}のみ

+ HTML＃uSub0 {幅：190px} / * IE6、IE7、IE8 **/

uSub0 {width：200px;幅：190px \ 9}

/** IE7、IE8 **/

uSub0 {幅：200pxの。 width/* /：190px}