Найти элемент из класса с именем getElementsByClassName

Marchewka PL спросил: 10 мая 2018 в 04:09 в: javascript

Я действительно не знаю, как я могу найти элемент с помощью getElementsByClassName(), если имя класса похоже ниже.

Это изображение того, как выглядит CSS на своем веб-сайте, и я хочу отредактировать фоновое изображение с помощью javascript. CSS Когда я меняю исходный url непосредственно в инструменте deverloper, изображение меняется на веб-сайте. Но он не работает с использованием javascript. Ничего не меняется.

CSS сайта:

.layer.interface-layer .main-column.right-column { 
  background: url(../img/gui/chat-powtarzalny-podklad.png) -251px 0px;
}

Мой JavaScript:

var panel = document.getElementsByClassName('.layer.interface-layer .main-column.right-column');panel.style.background = "url(LINK)";

1 ответ

Mike Chamberlain ответил: 10 мая 2018 в 05:01

В коде есть несколько проблем. Согласно MDN document.getElementsByClassName (выделение мое):

Возвращает объект типа массива всех дочерних элементов, которые имеют все заданные имена классов.

Для начала это означает, что вам нужно индексировать в возвращаемый объект:

var els = document.getElementsByClassName('.layer.interface-layer .main-column.right-column');
els[0].style.background = "...";

Однако, это все равно не будет работать, потому что элементы, которые вы пытаетесь выбрать сами only , имеют имена классов .main-column.right-column. Их ancestor имеют классы .layer.interface-layer.

Итак, вы ищете document.querySelector. Вместо этого вместо этого вы выбираете селектор CSS, который вы ожидаете:

var panel = document.querySelector('.layer.interface-layer .main-column.right-column');
panel.style.backgroundImage = 'url(../img/gui/chat-powtarzalny-podklad.png)';

Обратите внимание, что если вы хотите обновить элементы multiple , тогда вам нужно вместо этого используйте document.querySelectorAll, который возвращает NodeList, который можно рассматривать как массив. См. этот ответ о том, как перебирать узлы и обновлять их поочередно.

Синтаксис, который вы использовали "url(LINK)", также, похоже, неправильно. Не уверен, что это было то, что вы на самом деле пытались или просто пример. См. Выше, как правильно это использовать.

Marchewka PL ответил: 10 мая 2018 в 04:23
К сожалению, это не сработает. Я также пытался добавить > между именем класса, но он все еще не работает.
David Thomas ответил: 10 мая 2018 в 04:26
Затем вам нужно отредактировать свой вопрос, чтобы поделиться достаточным количеством вашего кода, чтобы мы могли воспроизвести вашу проблему.
Mike Chamberlain ответил: 10 мая 2018 в 04:29
@MarchewkaPL это будет работать, если вы используете его правильно. Должно быть, что-то еще вы делаете неправильно.
Mike Chamberlain ответил: 10 мая 2018 в 04:37
@MarchewkaPL см. Мои изменения для дальнейшего уточнения.