Question

我试图根据OnMouseOver属性在“none”和“block”之间切换一系列块，并同时将所选列表的标题更改为黄色。我的JavaScript代码是：

function switchCat(cat) {
    var uls = document.getElementsByClassName('lower-ul');
    var titles = document.getElementsByClassName('lower-cat-title');
    for (var i=0;i<uls.length;i++) {
        uls[i].style.display = 'none';
        titles[i].style.color = 'white';
    }
    if (cat != -1) {
        var wanted = document.getElementById('lower-cat-'+cat);
        var wantedTitle = document.getElementById('lower-cat-title-'+cat);
        wanted.style.display = 'block';
        wantedTitle.style.color = 'yellow';
    }
}

适用于Chrome，Opera和Firefox，但它不适用于IE。当我在IE中测试它时，我得到错误“对象不支持此属性或方法”。有谁知道我做错了什么？

Answer 1

除非您使用的是IE 9.0，否则您会发现getElementsByClassName is not supported by any version of IE less than 9.0。

Answer 2

IE很遗憾不支持document.getElementsByClassName。

添加您自己的支持

但是，您可以添加支持。您可以创建自己的功能，例如：

document.getElementsByClassName = function(class_name) {
    var docList = this.all || this.getElementsByTagName('*');
    var matchArray = new Array();
    var re = new RegExp("(?:^|\\s)"+class_name+"(?:\\s|$)");
    for (var i = 0; i < docList.length; i++) {
        if (re.test(docList[i].className) ) {
            matchArray[matchArray.length] = docList[i];
        }
    }
    return matchArray;
}

（来自here。）

更容易

更简单，如果您愿意，可以使用惊人的jQuery按class名称和id选择元素：

function switchCat(cat) {
    $(".lower-ul").css({
        display:"none"
    });
    $(".lower-cat-title").css({
        color:"white"
    });
    if (cat != -1) {
        $("lower-cat-"+cat).css({
            display:"block"
        });
        $("lower-cat-title-"+cat).css({
            color:"yellow"
        });
    }
}

更多更清洁！

JavaScript不改变IE中的显示类型或颜色

2 个答案:

添加您自己的支持

更容易