IE错误:无法设置属性'的值;样式':对象为null或未定义

IE Error : Unable to set value of the property 'style': object is null or undefined

本文关键字:对象 null 未定义 样式 错误 设置 属性 IE 的值      更新时间:2023-09-26

我不能使用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似乎找不到与查询选择器匹配的内容。

你可以在这里看到错误直播。

EDIT:文档不处于Quirks模式,因此querySelectorAll方法应该可以正常工作。

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

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

更新:

也请阅读此

您的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?      ^

您使用的是同一个选择器,而您似乎希望回退到另一个保证存在的元素。因此,修复选择器,就可以修复该错误。

错误解释

querySelectorquerySelectorAll没有得到IE8的完全支持,因此它对我的查询的响应不规则。


解决方案

我为IE8创建了一个独立的循环。只有在banner[0]元素/objet中找不到任何内容或未定义时,才会执行循环
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);