Блог

Главная - Вопросы по программированию - примените стиль css к нескольким узлам, имеющим один и тот же класс css, используя ванильный javascript

примените стиль css к нескольким узлам, имеющим один и тот же класс css, используя ванильный javascript

#javascript #html #css #arrays #dom

Вопрос:

Как задать свойство CSS для нескольких элементов, имеющих один и тот же класс?

Что касается моей ситуации: я хотел бы знать, как установить background-image для нескольких элементов один и тот же класс, используя ванильный JavaScript.

Допустим, у меня есть 5 div учеников, каждый из которых имеет свой класс .panel 

 <div class="container">
        <div class="panel">
            <h3>Mesmerizing Mountains</h3>
        </div>
        <div class="panel">
            <h3>The connecticut</h3>
        </div>
        <div class="panel">
            <h3>Spooky forest</h3>
        </div>
        <div class="panel">
            <h3>Wheat fields</h3>
        </div>
        <div class="panel">
            <h3>Alpha Hills</h3>
        </div>
    </div>

Если у меня есть ссылки на изображения в виде массива, как это:

 const imgLinks = ["https://example.com/panel_1img", "https://example.com/panel_2img", "https://example.com/panel_3img", "https://example.com/panel_4img", "https://example.com/panel_5img"]

Как я могу установить значение background-image для каждого .panel из элементов imgLinks массива.

краткое примечание: Первый элемент в массиве должен быть background-image первым .panel Второй элемент в массиве должен быть background-image вторым .panel и так далее.

Комментарии:

1. Ну, в вашем примере у вас есть 5 элементов и только три изображения, так как же эти изображения должны быть применены?

2. @ScottMarcus я написал их в качестве ссылки. у меня действительно есть 5 изображений в реальном времени. В любом случае, я отредактирую его сейчас.

3. Нам все еще нужна дополнительная информация, какое изображение должно сочетаться с каким элементом?

4. @ScottMarcus Первым элементом в массиве должно быть фоновое изображение первого .panel Вторым элементом в массиве должно быть фоновое изображение второго .panel и так далее.

Ответ №1:

Мы можем использовать querySelectorAll , чтобы получить массив всех элементов с классом panel и forEach перебрать каждый из них.

 const imgLinks = ["https://www.w3schools.com/cssref/paper.gif",
"https://www.w3schools.com/cssref/img_tree.gif",
"https://www.w3schools.com/cssref/img_tree.gif",
"https://www.w3schools.com/cssref/paper.gif",
"https://www.w3schools.com/cssref/img_tree.gif"];

/* images coutesy of w3schools.com */

document.querySelectorAll('.panel').forEach((e, i) => {
  e.style.backgroundImage = `url('${imgLinks[i]}')`;
}) 
 <div class="container">
  <div class="panel">
    <h3>Mesmerizing Mountains</h3>
  </div>
  <div class="panel">
    <h3>The connecticut</h3>
  </div>
  <div class="panel">
    <h3>Spooky forest</h3>
  </div>
  <div class="panel">
    <h3>Wheat fields</h3>
  </div>
  <div class="panel">
    <h3>Alpha Hills</h3>
  </div>
</div>

Комментарии:

1. Но это работает только для первого .panel раза, верно?

2. @PixieDust Я обновил свой ответ, чтобы продемонстрировать. В предыдущем примере был показан только один, потому что в массиве фактически существовал только один URL-адрес.

3. Обратите внимание, что вам нужно будет установить другие фоновые правила отдельно в вашем css.

4. .panel может быть использовано в другом месте, лучше отточить на .container .panel

5. Все в порядке. Я просто занимался мини-проектом в свободное время и использую chrome. Спасибо, что это решило мою проблему.

Метки: , ,