javascript:var仅在IE中未定义

我在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是否有一些关于文档范围变量的特别注意事项？

如果赋值后未定义，这可能意味着元素的css样式中没有赋值

它们在赋值之前是未定义的，这是所有浏览器中的情况。值

undefined

是任何（声明的）变量的默认值

还要注意，“文档范围”变量实际上附加到全局对象（在您的情况下，最有可能是

窗口

对象），以这种方式污染全局名称空间是一种非常糟糕的做法。克服它的一种方法是在整个过程中使用匿名函数闭包，如：

(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
   };

}());

这将使变量成为作用域的局部变量。“未定义”的行为保持不变，因为这是它应该如何表现的

---

编辑：虽然与您的问题没有直接关系，但我更新了代码，以显示如何公开可从外部访问的函数，同时保持变量的局部性。

如果在赋值后未定义，则可能意味着在元素的css样式中没有赋值

它们在赋值之前是未定义的，这是所有浏览器中的情况。值

undefined

是任何（声明的）变量的默认值

还要注意，“文档范围”变量实际上附加到全局对象（在您的情况下，最有可能是

窗口

对象），以这种方式污染全局名称空间是一种非常糟糕的做法。克服它的一种方法是在整个过程中使用匿名函数闭包，如：

(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
   };

}());

这将使变量成为作用域的局部变量。“未定义”的行为保持不变，因为这是它应该如何表现的

---

编辑：虽然与您的问题没有直接关系，但我更新了代码，以显示如何在保持变量本地的同时公开可从外部访问的函数。

发现问题出在

.css（）

函数中。jQuery函数

.css（）

应该封装浏览器之间的差异（即IE使用与其他浏览器不同的样式属性来表示不透明度）。然而，IE中的不透明性似乎被打破了。要在所有浏览器上实现这一点，我必须管理很多属性和案例，这是一个坏主意

---

解决方案是完全避免这个问题，并使用一个总体上更优雅的解决方案。我没有备份vars中的值，而是在css文件中为要覆盖的值定义了一种新样式。我没有调用

backupValues（）

和

restoreValues（）

，而是简单地调用了

.addClass（“myClass”）

和

.removeClass（“myClass”）

。这给了我完全相同的效果，并且不必补偿浏览器中的差异，因为浏览器有时非常复杂。

结果发现问题出在

.css（）

函数中。jQuery函数

.css（）

应该封装浏览器之间的差异（即IE使用与其他浏览器不同的样式属性来表示不透明度）。然而，IE中的不透明性似乎被打破了。要在所有浏览器上实现这一点，我必须管理很多属性和案例，这是一个坏主意

---

解决方案是完全避免这个问题，并使用一个总体上更优雅的解决方案。我没有备份vars中的值，而是在css文件中为要覆盖的值定义了一种新样式。我没有调用

backupValues（）

和

restoreValues（）

，而是简单地调用了

.addClass（“myClass”）

和

.removeClass（“myClass”）

。这给了我完全相同的效果，并且不必补偿浏览器中的差异，这些浏览器有时非常复杂。

哪个IE版本？您是否有一个公共复制URL？var overlay=$（“.ui小部件overlay”）；给你一个正确的DOM引用？检查覆盖。长度。@EricLaw MSFT-我正在使用IE8。@Diodeus是的。它返回我期望的元素，但是变量没有被分配。上面的代码没有显示这一点，但我正在备份这些值，以便为特定对话框更改它们。然后在对话框关闭后恢复这些值，以便其他对话框不受影响。此方法在其他浏览器上运行良好。@EricLaw MSFT-对不起，没有公共站点或repo。哪个IE版本？您是否有一个公共复制URL？var overlay=$（“.ui小部件overlay”）；给你一个正确的DOM引用？检查覆盖。长度。@EricLaw MSFT-我正在使用IE8。@Diodeus是的。它返回我期望的元素，但是变量没有被分配。上面的代码没有显示这一点，但我正在备份这些值，以便为特定对话框更改它们。然后在对话框关闭后恢复这些值，以便其他对话框不受影响。此方法在其他浏览器上运行良好。@EricLaw MSFT-抱歉，没有公共站点或repo。这不起作用，因为其他模块必须可以访问这些功能。总有办法使它们可以访问。要么从内部将它们连接起来，要么将它们分配给一个全局可访问的对象我不能从内部将它们连接起来，因为这些模块必须保持独立，并且将它们分配给全局对象不会给我带来完全相同的问题吗？整个问题之所以出现，是因为我不能首先分配全局变量。通过在全局范围内声明一个变量