Ограничить цвета текста черным
Мне нужен способ запретить пользователям использовать определенные цвета (в целях доступности). У меня есть массив цветов:
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>
Два цвета, которые есть в моем списке запрещенных цветов, должны быть удалены и заменены черным. Любые предложения будут ценны.
.children() смотрит только на прямых потомков. Так что он отлично работает с элементами .content>*. Однако ваш код не будет работать, если у вас есть несколько <div class=content, где один из них разрешен - он стирает их все, если один из них неверен.
Я также рекомендую whitelist цветов разрешается.
Люди используют текстовый редактор в CMS для установки цветов. У нас нет доступа для внесения изменений в редактор, но мы (администраторы) можем добавлять скрипты в текст заголовка. Что касается добавления кода в шестнадцатеричном формате, rgb или rgba, большинство пользователей довольно неграмотны в Интернете и не знают, как вручную добавить цвет таким образом, поэтому мы действительно не особо беспокоимся об этом.
Я думаю, вы здесь проиграете - цвета html не являются предопределенным списком, они будут составлять новые цвета на основе предоставленных символов, прочтите этот вопрос: stackoverflow.com/questions/8318911/…
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваш текущий код работает только с первым дочерним элементом '.content', вы можете использовать метод 'each' для перебора всех дочерних элементов, например:
$('.content').find('*').each( function ()
{
if ($.inArray($(this).css('color'), bannedColors)) {
$(this).css('color', '');
}
}
Это пройдет через всех дочерних элементов, а также проверит и установит их цвет CSS.
Взгляните еще раз - код OP работает со всеми прямыми дочерними элементами уже с каждым, исправление но OP влияет на всех из них (что ваше исправляет). Но проблема OP (насколько я понимаю) заключается в том, что он не поражает детей (и т. д.)
Спасибо, это исправлено.
Я сделал комбинацию кода Пола Бака, а также того, что заявляла свобода о том, как цвета в css() являются RGB, несмотря ни на что. Поэтому я преобразовал все названия цветов в RGB. Также в операторе if я убедился, что это правда / flase, добавив >= 0 в конце ... Спасибо всем за вашу помощь!
1. Как люди установленный цвета? Ограничьте выбор там. 2.
css()будет возвращать цвета в формате RGB, поэтому сравнение с именем строки не сработает (см. jsfiddle.net/ytsj830p) 3. Это кажется сильно ошибочной идеей; что мешает мне установить запрещенный цвет с помощью Hex, RGB или RGBA?