javascript - 如何使用javascript根据元素更改文本颜色？

Question

我正在为一个雪糕摊创建一个网站，我想使用 javascript 对他们的口味列表做一些有趣的事情。我想将列出 flavor 的文本更改为实际水果的适当颜色。我怎么能用 Javascript 做到这一点？目前我有数组中的 flavor 列表，我正在使用我的 addToPage 函数将 HTML 插入到页面中。如何创建颜色数组并根据水果为文本着色？谢谢。

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

您可以像这样向 flavor 数组添加一个 css 类:

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;
}
...