Вопрос по getelementsbyclassname, onmouseover, javascript, css – getElementsByClassName для изменения стиля элементов при возникновении события [duplicate]

5

На этот вопрос уже есть ответ здесь:

Что возвращают методы querySelectorAll и getElementsBy *? 9 ответов

Я пытаюсь использовать

 onmouseover="document.getElementsByClassName().style.background='color'"

изменить цвет всех элементов div с данным именем класса на другой цвет при наведении курсора на другой элемент страницы.

Вот jsfiddle - если бы кто-нибудь мог дать несколько полезных советов относительно того, где я ошибаюсь, это было бы здорово, я уверен, что это что-то действительно очевидное, что я упускаю. Он работал с document.getElementById, но это изменило только цвет первого div, а не всех.

Спасибо :)

Пост, кажется, пропустил мое приветствие и не позволяет мне редактировать его: O user2752988

Ваш Ответ

1   ответ
15

Как следует из названия функцииgetElementsByClassName возвращает коллекцию не только один объект. Таким образом, вам нужно перебрать их и применить цвет к нему.

document.getElementsByClassName()
                   ^_______

Плюс ваша идентификационная часть недействительна. У идентификатора не может быть пробелов, а также он не должен появляться на странице, которая нарушается:

<th id="colorswitcher A" onmouseover="document.getElementsByClassName('a').style.background='red'">a</th>
<th id="colorswitcher B" onmouseover="document.getElementsByClassName('a').style.background='blue'">b</th>

Вы можете сделать это таким образом (вы можете посмотреть, что такое обработчик, и попытаться поиграть с ним самим.), Не используйте встроенные атрибуты для обработчиков.

window.onload=function(){
    var aColl = document.getElementsByClassName('a'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
    var bColl = document.getElementsByClassName('b');

    document.getElementById('A').addEventListener('mouseover', function(){
        changeColor(aColl, 'red');
    });

    document.getElementById('B').addEventListener('mouseover', function(){
        changeColor(bColl, 'blue');
    });
}
function changeColor(coll, color){

    for(var i=0, len=coll.length; i<len; i++)
    {
        coll[i].style["background-color"] = color;
    }
}

скрипка

Если вы действительно пытаетесь сделать это для какой-то реальной работы, то не меняйте атрибут style, вместо этого определяйте классы и добавляйте / удаляйте классы при событиях mouseover, mouseout, чтобы получить свойство каскадирования css.

Обновил ответ. PSL
@lan да. отличный момент, чтобы добавить. PSL
Огромное спасибо. user2752988
Может быть важно отметить, чтоgetElementsByClassName возвращает живую коллекцию, и поэтому вы можете «кэшировать»aColl а такжеbColl в верхней части вашей функции (в противном случае вам придется повторно запросить в обработчиках событий). В любом случае, отличный ответ. Ian
Привет, спасибо за ответ! Я немного нуб, как бы я зацикливался на них? * редактировать: фиксированные идентификаторы. Благодарю. user2752988

Похожие вопросы