Как использовать JavaScript для изменения цвета текста в зависимости от элемента?

Question

Я создаю веб-сайт для снежного конуса, и я хотел бы сделать что-нибудь интересное с их списком ароматов, используя javascript. Я хочу изменить текст, перечисляющий вкус на соответствующий цвет фактического фрукта. Как я мог сделать это, используя Javascript? В настоящее время у меня есть список вкусов в массивах, и я вставляю HTML на страницу, используя мою функцию addToPage. Как я могу создать массив цветов и цвет текста на основе фруктов? Спасибо.

var flavorAdder = (function() {

var flavorArr1, flavorArr2, flavorArr3, flavorArr4, textLocator1, textLocator2, textLocator3, textLocator4, addToPage;

flavorArr1 = [
    '<p>Apple</p>',
    '<p>Banana</p>',
    '<p>Birthday Cake</p>',
    '<p>Black Cherry</p>'
];

flavorArr2 = [
    '<p>Green Apple</p>',
    '<p>Guava</p>',
    '<p>Honeydew Melon</p>',
    '<p>Huckleberry</p>'
];

flavorArr3 = [
    '<p>Peach</p>',
    '<p>Piña Coloda</p>',
    '<p>Pineapple</p>',
    '<p>Pink Grapefruit</p>'
];

flavorArr4 = [
    '<p>Pink Lemonade</p>',
    '<p>Red Raspberry</p>',
    '<p>Rootbeer</p>'
];

textLocator1 = document.querySelector('#flavorList1');
textLocator2 = document.querySelector('#flavorList2');
textLocator3 = document.querySelector('#flavorList3');
textLocator4 = document.querySelector('#flavorList4');


addToPage = function(arr, text) {
    arr.forEach(function(current) {
        text.insertAdjacentHTML('beforeend', current);
    });
}

addToPage(flavorArr1, textLocator1);
addToPage(flavorArr2, textLocator2);
addToPage(flavorArr3, textLocator3);
addToPage(flavorArr4, textLocator4);


})();

Answer 1

Простое добавление классов, а затем определение стиля на основе класса будет самым простым решением.

flavorArr1 = [
    '<p class="red">Apple</p>',
    '<p class="yellow">Banana</p>',
    '<p class="wheat">Birthday Cake</p>',
    '<p class="crimson">Black Cherry</p>'
];

flavorArr2 = [
    '<p class="lime">Green Apple</p>',
    '<p class="GreenYellow">Guava</p>',
    '<p class="DarkOrange">Honeydew Melon</p>',
    '<p class="MediumVioletRed">Huckleberry</p>'
];

CSS: встроенный или таблица стилей

<style>
.red{color:red;}
.yellow{color:yellow;}
.wheat{color:wheat;}
.crimson{color:crimson;}
.DarkOrange{color:DarkOrange;}
.MediumVioletRed{color:MediumVioletRed;}
.lime{color:lime;}
.GreenYellow{color:GreenYellow;}
</style>

Answer 2

Вы можете добавить класс css в массив flavor следующим образом:

flavorArr1 = [
    '<p class="green">Apple</p>',
    '<p class="yellow">Banana</p>',
    '<p class="pink">Birthday Cake</p>',
    '<p class="cherry">Black Cherry</p>'
];

А затем в файле css / sass:

.green {
    color: green;
}
.cherry {
    color: red;
}
...

Answer 3

Если вам нужно изменить цвет с помощью JavaScript, вы можете удалить и добавить новые классы

var cherry = document.getElementById("cherry");
cherry.classList.remove("red");
cherry.classList.add("yellow");

CSS:

.yellow {
    color: yellow;
}
.red {
    color: red;
}