@vova1212

Как убрать белый фон при помощи Greasemonkey и js?

Сам пытался, но для меня это сильно сложно).
Как при помощи js в Greasemonkey (firefox) изменить фон элементов страницы только с определенным значением CSS, заменив стили со значением "background: #fff;" на "background: #e8e8e8;"? То есть, все остальное не трогать, а где есть белый фон, подставить новое значение.
Думаю, это довольно просто, но у меня не выходит.
Зачем?) От белого фона глаза устают быстрей, а с серым намного удобней!
  • Вопрос задан
  • 364 просмотра
Решения вопроса 1
lazalu68
@lazalu68
Salmon
Если нужно убрать фон для всех элементов у которых фон белый или близок к белому, то вполне можно проверять все элементы на предмет цвета, а потом раздавать им ваш цвет.

Можно например так:
1. Собрать все нужные элементы. Т.к. белые цвета фона используются чаще для контейнеров, то и собирать можно только соответствующие, типа div, main, footer, header и т.д.
2. Рассортировать элементы по цветам,
3. Отсеять группы элементов, не соответствующие по цвету. Цвет не соответствует критериям, при которых он считается белым, если 1) его недостаточно хорошо видно - высокий уровень прозрачности и 2) сумма цветовых компонентов недостаточно высока, цвет достаточно далёк от оттенка который можно было бы назвать белым,

Пример кода
// white_like_thresold - minimal accepted value of color/white rate, colors that has higher rate is treated as white
// min_transparency - minimal accepted transparency (alpha), colors that has lesser transparency is treated as transparent

(function() {
	const rgb_max_intens_sum = 255 + 255 + 255;

	RegExp.integers = /\d+(\.\d+)?/g;

	var accepted_tags = ['article','aside','footer','header','hgroup','nav','section','div','main','pre','table','form'],
		white_like_thresold = 0.9, 
		min_transparency = 0.3,
		bg_color = '#fafbfc',
		$$result_collection = [];

	collectElements();
	setColor();

	function collectElements() {
		var background_color_key = 'background-color',
			rgba,
			color,
			collections = {},
			$$all = document.querySelectorAll(accepted_tags.join(','))

		for (var l = $$all.length, i = 0; i < l; i++) {
			color = getComputedStyle($$all[i])[ background_color_key ];
			if (!(color in collections)) {
				collections[ color ] = [];
			}
			collections[ color ].push( $$all[i] );
		}

		for (color in collections) {
			rgba = color.match( RegExp.integers ).map(Number);
			if ((rgba.length === 4 && rgba[3] < min_transparency) || (rgba[0]+rgba[1]+rgba[2])/rgb_max_intens_sum <= white_like_thresold) {
				continue;
			} else {
				$$result_collection = $$result_collection.concat( collections[color] );
			}
		}
	}
	function setColor() {
		var i = $$result_collection.length,
			$el;

		while (i--) {
			$el = $$result_collection[i];
			if (!$el._old_style) {
				$el._old_style = {
					backgroundColor: $el.style.backgroundColor
				};
			}
		    $el.style.backgroundColor = bg_color;
		}
	}
})();


Если кажется, что алгоритм оперирует со слишком большим количеством элементов, то достаточно сказать, что если брать в качестве примера эту страницу, то в результате выполнения было найдено 287 элементов из которых было сформировано 7 цветовых групп, из которых в свою очередь критерию соответствовали только 24.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@cssfish
Плохое знание основ - причина больших бед
смотришь отладчиком класс блока и к нему пишешь стили...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы