javascript - jQuery 代码适用于 Chrome，不适用于 IE9

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 中开发(使用动态生成所有 HTML 内容的 ExtJS，因此可能与 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 中工作。但是这个“修复”显然在 IE9 中不起作用。据我所知，ExtJS(它生成我所有的 HTML 内容)似乎是在 DOM 和 jQuery 准备就绪后初始化的，所以这可以解释它......那为什么它会在 Chrome 中工作？

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

Answer 1

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

So in IE9's debugger, turns out j is defined so it would seem jQuery has troubles getting the CSS attribute and textColor ends up being null.

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

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

Do I need to do something else for IE9 support ?

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

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

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

---

关于从 ready 切换到 load 的编辑:听起来您为创建元素所做的任何 ExtJS 工作都是在 ajax< 之后发生的 调用或类似的调用，并且该调用在 load 事件在 Chrome 上触发之前完成(因此该元素在那里)但在 load 在 IE9 上触发之后(因此它不是)。

理想情况下，您想向 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 获得相关的回调。