Очистка и объединение встроенных стилей CSS - PullRequest
Новая
       42

Очистка и объединение встроенных стилей CSS

2 голосов
/ 15 июля 2011

Я пытаюсь очистить введенный пользователем HTML-код, который имеет много встроенных CSS, особенно со стилями, и я не уверен, с чего начать.Кто-нибудь знает способ объединения пролетов и стилей с помощью JavaScript?Я нашел способы конвертировать встроенные стили, переместив все стили в таблицу стилей, но пока невозможно сохранить страницу CSS в нашей системе, как сейчас.(Надеюсь, это будет цель в ближайшем будущем, но не мой призыв)

Пример - превратить этот беспорядок: 

<span style="font-size: large;"><span style="font-family: arial black,avant garde;"><span style="font-size: xx-large;"><span style="font-size: large;"><span style="font-family: arial black,avant garde;"><span style="font-size: xx-large;"><span style="color: #000000;"><span style="font-size: x-large;"><span style="font-size: large;"><span style="font-family: arial black,avant garde;"><span style="font-size: xx-large;"><span style="color: #000000;"><span style="font-size: x-large;"><a href="index.php?p=75">Home</a></span></span></span></span></span></span></span></span></span></span></span></span></span>

в это: 

<span style="font-size: x-large;color: #000000;font-family: arial black,avant garde;"><a href="index.php?p=75">Home</a></span>

1 Ответ

1 голос
/ 16 июля 2011

Как насчет этого? 

window.onload = function(){
    var spans = document.querySelectorAll('span');

    for (var i = 0; i < spans.length; i++)
    {
        if (spans[i].hasChildNodes() && spans[i].childNodes.length == 1
            && spans[i].firstChild.tagName == 'SPAN')
        {
            var parent = spans[i];
            var child = spans[i].firstChild;

            // Copy new properties to child.
            for (var j = 0; j < parent.style.length; j++)
            {
                var prop = parent.style[j];
                if (child.style.getPropertyValue(prop) === "")
                {
                    child.style.setProperty(
                        prop,
                        parent.style.getPropertyValue(prop),
                        ''
                    );
                }
            }

            // Replace parent with child.
            parent.parentNode.insertBefore(child, parent);
            parent.parentNode.removeChild(parent);
        }
    }
}

Это найдет все промежутки и объединит те, у которых есть только один дочерний промежуток.

Это игнорирует использование !important, ноЯ предполагаю, что он все равно не используется.

Кроме того, он не будет возвращать точно такие же значения свойств, поскольку getPropertyValue нормализует их.

Редактировать:

Приведенный выше примеркод сокращает 13 интервалов в вашем примере до одного для меня, однако Safari отбрасывает некоторые стили в этом процессе.

Это довольно упрощенно, конечно, и только на основе одного примера, так как японятия не имею, к какому типу супа вы можете прибегать, или какие именно результаты вы можете искать.

Например, вы можете также объединить пролеты следующим образом: <p>foo<span style="font-size: x-large"> <span style="font-size: small">bar</span></span></p>?В конечном итоге вы потеряете размер шрифта в этом месте, но это будет иметь лишь незначительное значение.

Я уверен, что таких случаев намного больше, поэтому все сводится к тому, насколько чистоВы хотите, чтобы конечный результат был, и сколько времени вы хотите потратить на исправление всех угловых случаев.

Вы можете найти больше информации о методах DOM, которые я использовал в Справочник DOM Mozilla для CSSStyleDeclaration и элемента , например.

...