Question

这里对jQuery很新，我有一大堆代码可以在Chrome中正常运行，但在IE9中失败了（还没有尝试过FF）。

以下是代码：

var textColor = $('#navmenu-body').css('color');
textColor = textColor.slice(4);

在IE9中，我收到错误，因为slice未被定义，因此无法调用textColor。

我不确定是否因为jQuery无法找到#navmenu-body元素或者无法找到CSS属性color。

所以我做了：

var j = $('#navmenu-body');
var textColor = $('#navmenu-body').css('color');
textColor = textColor.slice(4);

在IE9的控制台中，j.length返回0.所以选择器确实无法正常工作

这里是#navmenu-body HTML DOM

<div id="navmenu-body" class="x-panel-body x-panel-body-cssmenu x-layout-fit x-panel-body-cssmenu" style="height: 398px; left: 0px; top: 0px; width: 200px;">
</div>

我是否需要为IE9支持做其他事情？

根据T.J. Crowder回答，我想我可能会遇到一个问题，即在我尝试获取的元素可用之前调用选择器。

我主要在Chrome中开发（使用ExtJS动态生成所有HTML内容，因此可能与jQuery存在一些冲突），我不得不改变：

$(document).ready(function () {
    ...
    var textColor = $('#navmenu-body').css('color');
    textColor = textColor.slice(4);
});

为：

$(window).load(function () {
    ...
    var textColor = $('#navmenu-body').css('color');
    textColor = textColor.slice(4);
});

让它在Chrome中运行。但那＆＃34;修复＆＃34;显然在IE9中不起作用。根据我的内容，看起来ExtJS（生成我的所有HTML内容）在DOM和jQuery准备就绪后初始化，这样就可以解释它......那么为什么它会在Chrome中运行呢？

我想我需要打开一个与ExtJS相关的新问题。

Answer 1

var j = $('#navmenu-body');
var textColor = $('#navmenu-body').css('color');
textColor = textColor.slice(4);
所以在IE9的调试器中，结果是j被定义，所以看起来jQuery很难获得CSS属性，而textColor最终为null。

没有。 jQuery的工作方式，$(...)将始终返回一个jQuery对象。该jQuery对象可能没有匹配的元素，但它不会是undefined或null。

但该对象显然是空的，因为这是jQuery从undefined返回css("color")的唯一时间。（即使集合中的第一个元素没有颜色，它也会返回""，而不是undefined。）

我是否需要为IE9支持做其他事情？

不，所有当前版本的jQuery都直接支持IE9。

这里发生的是，在您的IE9测试中，选择器#navmenu-body与您运行时的任何元素都不匹配。您必须确定为什么，因为我们在问题中没有足够的信息来回答这个问题。

据猜测，听起来IE9比Chrome更早发射某些事件或回叫（或者你有竞争条件而且只是抽奖的运气）。或者您正在使用条件注释，并且该元素在IE9中不存在。（IE9仍有条件注释。）或IE9中的其他地方发生错误，停止代码并阻止您将该元素添加到DOM。等等。看看你在这个代码的相对于创建元素的位置。从根本上说，如果元素存在并且在运行var textColor = $("#navmenu-body").css("color");时位于DOM中，textColor将是一个字符串。它可能是一个空字符串，但它是一个字符串。

重新编辑有关从ready切换到load的信息：这听起来就像您在ajax电话或某些此类电话后创建元素时所做的任何ExtJS内容，该调用在Chrome上load事件触发之前完成（所以元素就在那里）但是在IE9上load触发后（所以它不是）。

理想情况下，您希望使用ExtJS注册回调，告诉ExtJS在创建元素的操作完成时给您打电话。然后，您不需要使用ready或load。

非常脏的解决方法是轮询：

$(document).ready(function () {
    // ...

    init();
    function init() {
        var navmenuBody = $('#navmenu-body');
        if (!navmenuBody[0]) {    // **Very** dirty workaround
            setTimeout(init, 50); // It wasn't there yet, so check back in 50ms
            return;
        }
        var textColor = navmenuBody.css('color');
        textColor = textColor.slice(4);
    }
});

但同样，这是一个非常肮脏的解决方法。我确定您可以从ExtJS获得相关回调。

jQuery代码适用于Chrome，而不适用于IE9

1 个答案: