IE错误：无法设置属性“style”的值：object为null或undefined

Question

我不能使用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方法可以正常工作。

Answer 1

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

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

更新

也请阅读this

Answer 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?      ^

您正在使用相同的选择器，而您似乎希望回退到另一个保证存在的元素。因此，修复选择器并修复该错误。

Answer 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);