javascript - 将文本颜色限制为黑色

Question

我需要一种方法来限制用户使用某些颜色(出于可访问性目的)。我有一系列颜色:

var bannedColors = ['aqua', 'mediumseagreen', 'deepskyblue', 'mediumorchid', 'darkslategray', 'teal', 'mediumaquamarine', 'steelblue', 'indigo', 'slategrey', 'gold', 'darkorange', 'mediumvioletred', 'lightslategrey', 'orange', 'orangered', 'crimson', 'silver', 'black', 'yellowgreen', 'firebrick', 'mediumpurple', 'darkcyan', 'dodgerblue', 'greenyellow', 'brown', 'darkslateblue', 'lightseagreen', 'midnightblue'];

我试过做类似的事情:

if($.inArray($('.content').children().css('color'), bannedColors)) {
    $('.content').children().css('color', '');
}

但是好像不行。我想要/需要它来查看 div 及其所有子项的颜色。例如:

<div class="content">
    <p style="color: aqua">Here is some text with color...</p>
    <div class="inner-content">
        <p style="color: mediumseagreen">Another set of text with another color...</p>
    </div>
</div>

在我的禁用颜色列表中的这两种颜色应该被剥离并替换为黑色。任何建议将不胜感激。

Answer 1

您当前的代码仅适用于“.content”的第一个子项，您可以使用“each” 方法遍历所有子项，如下所示:

$('.content').find('*').each( function ()
{
    if ($.inArray($(this).css('color'), bannedColors)) {
        $(this).css('color', '');
    }
}

这将遍历所有 child 并检查和设置他们的 CSS 颜色。