JavaScript не меняет тип отображения или цвет в IE

Question

Я пытаюсь переключить ряд блоков между «none» и «block» на основе свойства OnMouseOver и изменить заголовок выбранного списка на желтый одновременно. Код 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 не поддерживается ни одной версией IE менее 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;
}

(с здесь .)

Еще проще

Еще проще, если хотите, вы можете использовать удивительный 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"
        });
    }
}

Подробнее очиститель!