Ответ 1

SnappySnippet

Наконец-то я нашел некоторое время для создания этого инструмента. Вы можете установить SnappySnippet из Интернет-магазина Chrome. Это позволяет легко извлекать HTML + CSS из указанного (последнего проверенного) DOM node. Кроме того, вы можете отправить свой код прямо в CodePen или JSFiddle. Наслаждайтесь!

Другие функции

• очищает HTML (удаление ненужных атрибутов, исправление отступов)
• оптимизирует CSS, чтобы сделать его доступным для чтения.
• полностью настраивается (все фильтры могут быть отключены)
• работает с ::before и ::after псевдоэлементами
• хороший пользовательский интерфейс благодаря Bootstrap и Flat-UI projects

Код

SnappySnippet является открытым исходным кодом, и вы можете найти код на GitHub.

Реализация

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

Первая попытка - getMatchedCSSRules()

Сначала я попытался получить исходные правила CSS (поступающие из файлов CSS на веб-сайте). Совершенно удивительно, что это очень просто благодаря window.getMatchedCSSRules(), однако, это не сработало. Проблема заключалась в том, что мы принимали только часть селекторов HTML и CSS, которые были сопоставлены в контексте всего документа, которые больше не сопоставлялись в контексте фрагмента HTML. Поскольку синтаксический анализ и изменение селекторов не выглядели как хорошая идея, я отказался от этой попытки.

Вторая попытка - getComputedStyle()

Затем я начал с того, что предложил @CollectiveCognition - getComputedStyle(). Тем не менее, я действительно хотел отделить HTML-форму HTML вместо того, чтобы вставлять все стили.

Проблема 1 - выделение CSS из HTML

Решение здесь было не очень красивым, но довольно простым. Я назначил идентификаторы для всех узлов в выбранном поддереве и использовал этот идентификатор для создания соответствующих правил CSS.

Проблема 2 - удаление свойств со значениями по умолчанию

Присвоение идентификаторов узлам было хорошо отработано, однако я узнал, что каждый из моих правил CSS имеет ~ 300 свойств, что делает весь CSS нечитаемым.
Оказывается, что getComputedStyle() возвращает все возможные свойства и значения CSS, рассчитанные для данного элемента. Некоторые из них были пустыми, некоторые имели значения по умолчанию для браузера. Чтобы удалить значения по умолчанию, мне пришлось сначала получить их из браузера (и каждый тег имеет разные значения по умолчанию). Решением было сравнение стилей элемента, поступающего с веб-сайта, с тем же элементом, который был вставлен в пустой <iframe>. Логика здесь заключалась в том, что в пустой <iframe> нет таблиц стилей, поэтому каждый добавленный в нее элемент имеет только стили браузера по умолчанию. Таким образом, я смог избавиться от большинства свойств, которые были незначительными.

Проблема 3 - сохранение только сокращенных свойств

Следующее, что я заметил, это то, что свойства, имеющие сокращенный эквивалент, были излишне распечатаны (например, было border: solid black 1px, а затем border-color: black;, border-width: 1px itd.).
Чтобы решить эту проблему, я просто создал список свойств с сокращенными эквивалентами и отфильтровал их из результатов.

Проблема 4 - удаление префиксных свойств

Количество свойств в каждом правиле было значительно ниже после предыдущей операции, но я обнаружил, что у меня было много префиксов -webkit-, о которых я никогда не слышал (-webkit-app-region? -webkit-text-emphasis-position?).
Мне было интересно, следует ли мне сохранять какие-либо из этих свойств, потому что некоторые из них казались полезными (-webkit-transform-origin, -webkit-perspective-origin и т.д.). Я не понял, как это проверить, и поскольку я знал, что большую часть времени эти свойства являются просто мусором, я решил удалить их все.

Проблема 5 - объединение одних и тех же правил CSS

Следующая проблема, которую я заметил, заключалась в том, что одни и те же правила CSS повторяются снова и снова (например, для каждого <li> с точно такими же стилями было создано одно и то же правило в созданном CSS файле).
Это просто вопрос сравнения правил друг с другом и объединения их, которые имели точно такой же набор свойств и значений. В результате вместо #LI_1{...}, #LI_2{...} я получил #LI_1, #LI_2 {...}.

Проблема 6 - очистка и исправление отступа HTML

Поскольку я был доволен результатом, я перешел в HTML. Это выглядело как беспорядок, главным образом потому, что свойство outerHTML сохраняет формат в точности так, как оно было возвращено с сервера.
Единственным кодом HTML, взятым из outerHTML, был простой переформатирование кода. Поскольку это что-то доступно в каждой среде IDE, я был уверен, что есть библиотека JavaScript, которая делает именно это. И получается, что я был прав (jquery-clean). Что еще, у меня лишние атрибуты удаления (style, data-ng-repeat и т.д.).

Проблема 7 - фильтрует нарушение CSS

Так как есть вероятность, что в некоторых случаях фильтры, упомянутые выше, могут сломать CSS во фрагменте, я сделал все из них необязательным. Вы можете отключить их из меню "Настройки".

Ответ 2

Браузеры Webkit (не уверены в FireBug) позволяют вам легко скопировать HTML-элемент элемента, чтобы одна часть процесса была в стороне.

Запуск этого (в консоли javascript) перед копированием HTML для элемента переместит все вычисленные стили для указанного родительского элемента, а также всех дочерних элементов в атрибут стиля встроенного стиля, который затем будет доступен как часть HTML.

var el = document.querySelector("#someid");
var els = el.getElementsByTagName("*");

for(var i = -1, l = els.length; ++i < l;){

    els[i].setAttribute("style", window.getComputedStyle(els[i]).cssText);

}

Это полный хак, и у вас будет много атрибутов "junk" css для прохода, но, по крайней мере, вы начнете.

Ответ 3

Первоначально я задавал этот вопрос, я искал решение Chrome (или FireFox), но я наткнулся на эту функцию в инструментах разработчика Internet Explorer. Очень многое, что я ищу (кроме javascript)

Результат:

Ответ 4

Я создал этот инструмент много лет назад для той же цели:
http://www.betterprogramming.com/htmlclipper.html

Вы можете использовать и улучшать его.

Ответ 5

Это можно сделать с помощью Firebug Plugin под названием scrapbook

Вы можете проверить параметр Javascript в настройке

Edit:

Это также может помочь

Firequark - это расширение для Firebug для помощи в обработке HTML-экрана Зачистка. Firequark автоматически извлекает селектор css для одного или несколько html node (s) с веб-страницы с использованием Firebug (веб-разработка плагин для Firefox). Селектор css сгенерированный может быть задан как вход для html экранные скребки, такие как Scrapi to извлекать информацию. Firequark - построенный для развязывания силы css селектор для использования html-экрана выскабливание.

Ответ 6

divclip является обновленным версия Florentin Sardan's htmlclipper

с современными усовершенствованиями: ES5, HTML5, scoped CSS...

вы можете программно извлечь стилизованный div с помощью

var html = require("divclip").bySel(".article-body");
console.log(html);

Enjoy.

Ответ 7

Плагинов нет. Это можно сделать очень просто с помощью средств разработки для Internet Explorer 11 с одним щелчком мыши, очень чистым. Как раз на элементе и осмотрите этот элемент, и щелкните правой кнопкой мыши на каком-то блоке и выберите "Копировать элемент со стилями". Вы можете увидеть это на изображении ниже.

Он обеспечивает код css очень чистый, например

.menu { 
    margin: 0;
}
.menu li {
    list-style: none;
}

Ответ 8

В последнее время я создал расширение chrome "eXtract Snippet" для копирования проверяемого элемента, html и только релевантные запросы css и media на странице. Обратите внимание, что это даст вам актуальный CSS

https://chrome.google.com/webstore/detail/extract-snippet/bfcjfegkgdoomgmofhcidoiampnpbdao?hl=en

Ответ 9

Инструмент с единственным решением для этого я не знаю, но вы можете использовать Firebug и расширение веб-разработчика одновременно.

Используйте Firebug, чтобы скопировать раздел html, который вам нужен (Inspect Element) и веб-разработчик, чтобы узнать, какой css связан с элементом (Calling Web Developer "View Style Information" ) - он работает как Firebug "Inspect Element", но вместо показывая html-разметку, он показывает связанный CSS с этой разметкой).

Это не совсем то, что вы хотите (один клик для всего), но он довольно близок и, по крайней мере, интуитивно понятен.

Ответ 10

Мне также нужна эта функция Firebug! До тех пор другой подход заключается в использовании этой онлайн-службы для удаления классов и преобразования CSS в встроенные стили.

Ответ 11

http://clipboard.com делает это и довольно хорошо. Хотя ваше ожидание скопированной версии точно так же, как в оригинале, чтобы вы могли играть и учиться с ней, может быть нереалистичным.

Ответ 12

Веб-сайт в easel.io делает то, что вы ищете.

У них есть расширение chrome, которое позволяет копировать компоненты (с кодом) и вставлять их в свои макеты

Ответ 13

Просто скопируйте нужную часть с веб-страницы и вставьте ее в редактор wysiwyg. Проверьте источник html, нажав кнопку "source" на панели инструментов редактора.

Я нашел этот самый простой способ, когда я работал на сайте Drupal. Я использую wysiwyg CKeditor.

Ответ 14

jQuery.fn.extend({
getStyles: function() {
    var rulesUsed = [];
    var sheets = document.styleSheets;
    for (var c = 0; c < sheets.length; c++) {
        var rules = sheets[c].rules || sheets[c].cssRules;
        for (var r = 0; r < rules.length; r++) {
            var selectorText = rules[r].selectorText.toLowerCase().replace(":hover","");
            if (this.is(selectorText) || this.find(selectorText).length > 0) {
                rulesUsed.push(rules[r]);
            }
        }
    }
    var style = rulesUsed.map(function(cssRule) {
        return cssRule.selectorText.toLowerCase() + ' { ' + cssRule.style.cssText.toLowerCase() + ' }';
    }).join("\n");
    return style;
}
});

использование: $("#login_wrapper").getStyles()

Ответ 15

Существует плагин firefox, который сохраняет всю HTML, CSS и т.д., но я не видел того, что делает частичное сохранение.

Я помню, что IE 5.5 имел то, что вы искали, хотя;)

Ответ 16

Я адаптировал главный проголосовавший ответ как букмарклет с перетаскиванием.

Просто посетите эту страницу и перетащите кнопку "Запустить код jQuery" на панель закладок.

Ответ 17

Я рассмотрел все инструменты, упомянутые здесь как ответ. Но они дают повторяющийся, грязный HTML CSS с красивым лицом, на котором вы смотрели. Они не дают вам JS.

Что я делаю:

• Сначала я фильтрую объявления, которые не требуются на странице
• Затем сохраните полную веб-страницу вместе со связыванием ресурсов.
• Удалите ненужные HTML, CSS и JS
• сохраняйте ненужные ресурсы поочередно.