IE 错误：无法设置属性“样式”的值：对象为空或未定义答案

【问题标题】：IE Error : Unable to set value of the property 'style': object is null or undefinedIE 错误：无法设置属性“样式”的值：对象为空或未定义
【发布时间】：2013-12-17 02:49:29
【问题描述】：

我不能为此使用 JQuery，但我找不到修复 IE8 代码的方法。它适用于所有其他浏览器（适用于 IE9+）。

这是一个横幅旋转器，它停止工作以隐藏可见的横幅。

var bannerRotation = setInterval(function () {
    var img = document.querySelectorAll('#contentBannerRotator img');
    var banner = document.querySelectorAll('#contentBannerRotator a[style="display: block;"]');
    if (!banner || banner.length < 1) 
        var banner = document.querySelectorAll('#contentBannerRotator a[style="display:block;"]');

    banner[0].style.display = "none"; /* This is where the error occurs */

    var rand = Math.floor(Math.random() * img.length);
    img[rand].parentNode.style.display = "block";
}, 30000);

IE8 似乎找不到与查询选择器匹配的内容。

你可以看到error live here。

编辑：文档没有进入 Quirks 模式，所以 querySelectorAll 方法应该可以正常工作。

【问题讨论】：

如果我没记错的话，IE8 不支持 QSA
查看此链接stackoverflow.com/questions/16920365/…
@RUJordan 谢谢。我检查了一下，我的文档没有进入 Quirks 模式。 X-UA-Compatible 元行也无济于事。如您提供的答案链接中所述，QSA 应该在标准声明的文档类型中起作用。

标签： javascript internet-explorer-8

【解决方案1】：

你可以尝试检测元素是否存在：

if(typeof banner[0] != 'undefined') {
    banner[0].style.display = "none"; /* This is where the error occurs */
}

更新：

还请阅读this

【讨论】：

是的，这修复了错误消息，但它不会隐藏可见的横幅，使下一个横幅显示在已经可见的顶部并用横幅填充整个页面。无论如何，感谢您的帮助，不胜感激。
@JeffNoel 如果可能的话，我建议你使用 jQuery 或其他一些 javascript 框架，这样可以消除浏览器的不兼容性。
如果我的主管允许使用框架/库，我会解决这个问题，相信我！

【解决方案2】：

你的if 正文基本上什么都不做，是不是打字错误？

var banner = document.querySelectorAll('#contentBannerRotator a[style="display: block;"]');
    if (!banner || banner.length < 1) 
        var banner = document.querySelectorAll('#contentBannerRotator a[style="display:block;"]');
        //  the exact same selector again?      ^

您使用的是相同的选择器，而您似乎想回退到另一个保证存在的元素。所以修复选择器，你就修复了那个错误。

【讨论】：

这不应该是评论，而不是答案吗？
if 存在，因为后备查询包含空格。我认为既然 IE8 最初没有提取该元素，可能是因为查询本身及其语法。
@JeffNoel 我没有注意到，抱歉。但可能是 ie8 不支持属性选择器。根据 mdn 和 caniuse 支持 QSA，但支持有限。
@bfavaretto 常规的 querySelector 似乎也不起作用。感谢您抽出宝贵时间，我将构建一个快速循环，看看它是否每次都检查每个元素的属性。这可能是我最后的解决方案。

【解决方案3】：

错误说明

IE8 不完全支持querySelector 和querySelectorAll，因此它对我的查询的响应不规律。

解决方案

我为 IE8 创建了一个独立循环。只有在banner[0] 元素/对象中找不到任何内容或未定义时，才会执行循环。
IE8 有一个特定的子节点数组结构，all 数组。

JavaScript

var bannerRotation = setInterval(function () {
    var img = document.querySelectorAll('#contentBannerRotator img');
    var bannerContainer = document.querySelector('#contentBannerRotator');
    var banner = document.querySelectorAll('#contentBannerRotator a[style="display: block;"]');


    if (!banner[0] || banner.length < 1) {
        /* Fix for IE8 */
        for (var i = 0; i < bannerContainer.childNodes[0].all.length; i++) {
            if (bannerContainer.childNodes[0].all[i].nodeName == "A") {

                if (bannerContainer.childNodes[0].all[i].style.display == "block") {
                    bannerContainer.childNodes[0].all[i].style.display = "none";
                    break;
                }
            }
        }
    } else {
        banner[0].style.display = "none";
    }

    var rand = Math.floor(Math.random() * img.length);
    img[rand].parentNode.style.display = "block";
}, 30000);

【讨论】：