Как с помощью jQuery сбросить все инлайн-стили (с некоторым исключением)?

Question

[Alexander Lashchevsky]

Здравствуйте!

Есть сайт на очень тупой CMS, но менять её нет возможности, и нет возможности влезать в серверную часть CMS, чтобы что-то поменять. Парсер wysiwyg-редактора работает хуже некуда, добавляя для всех p, span, font кроме реально указанных пользователем данных всякие font-size, font-family и проч., всё то, что пользователь не указывал. В общем ад для стилизации с помощью CSS. Примерно такой ужас:

<font style="font-family: verdana, arial, helvetica; font-size: 10pt; color: rgb(255, 255, 255);">текст</font>

Узнали, на чём сайт? :)

Решил сбросить все инлайн-стили: спарсенный текст оборачиваем в контейнер, например, .description, и помощью jQuery обнуляем все инлайны. Осталась одна проблема: сбросить то мы всё можем, но некоторые инлайновые стили всё-таки полезно сохранить. Т.е. все эти font-family и пр. нужно удалить, но сохранить color, text-align и ещё парочку.

Для сброса всех стилей голову включать не надо, всё просто:

$('.description p').attr('style', '');
$('.description span').attr('style', '');
$('.description font').attr('style', '');
...

А что делать, если некоторые инлайны надо сохранять?
Если кто-нибудь предложит код, я буду очень благодарен! :)

С уважением,
Александр.

Answer 1

[Евгений Петров]

Ну как... В цикле проходить.
Ну а дальше всё зависит от логики. Можно озадачиться и формировать классы, формируя их на лету (и такая логика будет весьма непроста), а можно просто перезаписывать инлайн-атрибут style, оставляя только нужное.

Вариант попроще

var usefulRules = [
	'text-align',
	'font-size',
	'color'
];

$('.description [style]').each(function (elem) {
	var style = [];

	$(this).attr('style').split(';').forEach(function (rule) {
		if (usefulRules.indexOf($.trim(rule.split(':')[0]) >= 0) {
			style.push(rule);
		}
		/*А ещё тут есть elem.tagName...*/
	});
	$(this).attr('style', style.join(';'));
});

Answer 2

[Андрей Мохов]

$('.description p').attr('style', '').css({'font-size': '12px'});

Comments

[Alexander Lashchevsky]

Так не получится. По умолчанию font-size вообще в онлайн выставляться не должен, но если пользователь указал 16px, а другой 24px? Тоже самое с цветом. Нужно именно сохранить некоторые именно с теми параметрами, которые спарсились.

[Alexander Lashchevsky]

* онлайн=инлайн (автокоррекция)

[Андрей Мохов]

Александр Лащевский: тогда вам придется для начала выдернуть все текущие значения тех параметров, которые хотите сохранить, затем обнулить, а после восстановить сохраненные

Answer 3

[Денис Инешин]

Ну зачем тут jQuery использовать?

Inline стили при большом желании можно перебить из CSS:

font-size: 12px !important;
color: #333 !important;

и так далее. Таким образом вы перебьете только нужные стили и никаких заморочек с jQuery.

jsfiddle.net/IonDen/qnk7dn0f

Comments

[Alexander Lashchevsky]

Я бы лучше использовал jQ, чем !important. :)

[Денис Инешин]

Александр Лащевский: мда, вместо того чтобы использовать нативный инструмент, используем jQ, который нужен совсем для другого.