javascript：varはIE内でのみ定義されていません

Question

私はドキュメントスコープで宣言したvarが未定義で書き込みできないIEで問題が発生しています（chrome、firefox、およびsafariで正常に動作します）。それは次のようになります。

myFile.js

var background; 
var opacity; 
var zIndex; 

function backupValues() { 
    var overlay = $(".ui-widget-overlay"); 
    background = overlay.css("background"); 
    opacity = overlay.css("opacity"); 
    zIndex = overlay.css("z-index"); 
} 

function restoreValue() { 
    $(".ui-widget-overlay").css("background", background).css("opacity", opacity).css("z-index", zIndex); 
} 

私はIEでこれをデバッグし、各課題の前と後の両方、すべての値が「未定義」されていることを発見しました。ここで何が間違っていますか？なぜこれは他のブラウザでも使えますか？ IEにはドキュメントスコープ変数に関するいくつかの特別な警告がありますか？

Answer 1

問題は.css()の機能であることが判明しました。 jQuery関数.css()は、ブラウザ間の違いをカプセル化することになっています（つまり、IEは他のブラウザよりも不透明度の異なるスタイル属性を使用します）。しかし、それはIEで不透明に壊れているようです。すべてのブラウザでこの作業を行うには、多くのプロパティやケースを管理する必要がありますが、これは悪い考えです。

解決策は、問題を完全に回避し、より洗練された全体的なソリューションを使用することでした。 varsの値をバックアップするのではなく、私が上書きしようとしていた値のCSSファイルに新しいスタイルを定義しました。 backupValues()とrestoreValues()を呼び出す代わりに、私は単に.addClass("myClass")と.removeClass("myClass")を呼び出しました。これはまったく同じ効果をもたらし、時にはかなり複雑なブラウザーの相違を補う必要はありません。

Answer 2

定義されていない場合は、の後にを割り当てても、要素のCSSスタイルに値が割り当てられていない可能性があります。

割り当て前に定義されていないことは、すべてのブラウザでどのように使用されるべきかということです。値undefinedは、（宣言された）変数のデフォルト値です。

実際にグローバルスコープの変数（実際にはwindowオブジェクト）には「ドキュメントスコープ」の変数が追加されており、このようにグローバル名前空間を汚染することは非常に悪い習慣です。これは、スコープに変数をローカルになるだろう

(function() { 

    var background; 
    var opacity; 
    var zIndex; 

    function backupValues() { 
     var overlay = $(".ui-widget-overlay"); 
     background = overlay.css("background"); 
     opacity = overlay.css("opacity"); 
     zIndex = overlay.css("z-index"); 
    } 

    function restoreValue() { 
     $(".ui-widget-overlay").css("background", background).css("opacity", opacity).css("z-index", zIndex); 
    } 

    window.my.fancy.namespace = { 
     backupValues: backupValues, 
     restoreValues: restoreValues 
    }; 

}()); 

：それを克服するための1つの方法は次のように、全部の周りに匿名関数クロージャを持っている可能性があります。 "未定義"の動作は同じですが、これはどのようにであるべきですかが動作します。

EDIT：あなたの質問に直接関係はありませんが、変数をローカルに保持しながら外部からアクセスできるようにする方法を示すコードを更新しました。