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', '');
    }
}

这将遍历所有子级并检查并设置其CSS颜色。

将文字颜色限制为黑色

1 个答案: