DOM의 특정 요소에서 HTML+CSS+JS를 선택적으로 복사하는 도구

DOM의 특정 요소에서 HTML+CSS+JS를 선택적으로 복사하는 도구

닫힘.이 질문은 책, 도구, 소프트웨어 라이브러리 등에 대한 권장 사항을 찾는 것입니다.충족되지 않습니다.스택 오버플로 지침입니다.현재 답변을 수락하고 있지 않습니다.

---

책, 도구, 소프트웨어 라이브러리 등에 대한 추천을 구하는 질문은 허용되지 않습니다.질문에 사실과 인용문으로 답변할 수 있도록 질문을 편집할 수 있습니다.

6년 전에 문을 닫았습니다.

이 질문을 개선합니다.

대부분의 웹 개발자들과 마찬가지로, 저는 때때로 웹 사이트의 소스를 보고 마크업이 어떻게 구축되는지 확인하는 것을 좋아합니다.Firebug 및 Chrome Developer Tools와 같은 도구를 사용하면 코드를 쉽게 검사할 수 있지만, 특정 섹션을 복사하여 로컬로 재생하려면 개별 요소와 관련 CSS를 모두 복사해야 하는 번거로움이 있습니다.그리고 아마도 전체 소스를 저장하고 관련이 없는 코드를 잘라내는 작업만큼의 작업이 필요할 것입니다.

Firebug에서 요소를 마우스 오른쪽 버튼으로 클릭하고 "Save HTML+CSS+"를 사용할 수 있으면 좋겠습니다.JS for this Element" 옵션을 선택합니다.그런 도구가 존재합니까?Firebug 또는 Chrome Developer Tools를 확장하여 이 기능을 추가할 수 있습니까?

스내피스니펫

저는 마침내 이 도구를 만들 시간을 얻었습니다.Github에서 Snappy Snippet을 설치할 수 있습니다.지정된(마지막으로 검사한) DOM 노드에서 HTML+CSS를 쉽게 추출할 수 있습니다.또한 코드를 CodePen 또는 JSFidle로 바로 보낼 수 있습니다.맛있게 드세요!

기타 기능

• HTML 정리(불필요한 속성 제거, 들여쓰기 수정)
• CSS를 최적화하여 읽기 쉽게 만듭니다.
• 전체 구성 가능(모든 필터를 끌 수 있음)
• 와 함께 작동합니다.::before그리고.::after
• 부트스트랩 및 플랫-UI 프로젝트 덕분에 멋진 UI

코드

스내피 스니펫은 오픈 소스이며, GitHub에서 코드를 찾을 수 있습니다.

실행

제가 이것을 만들면서 꽤 많은 것을 배웠기 때문에, 저는 제가 경험한 몇 가지 문제들과 그것들에 대한 저의 해결책들을 공유하기로 결정했습니다, 아마도 누군가가 그것을 흥미롭게 여길 것입니다.

첫 번째 시도 - 일치하는 CSS 규칙 가져오기()

처음에는 원래 CSS 규칙(웹사이트의 CSS 파일에서 제공)을 검색하려고 했습니다.은 꽤놀게도이, 에은매간다단니합우것 에 매우 .window.getMatchedCSSRules()하지만, 그것은 잘 되지 않았습니다.문제는 전체 문서의 맥락에서 일치하는 HTML과 CSS 선택기의 일부만 가져가고 HTML 스니펫의 맥락에서 더 이상 일치하지 않는다는 것이었습니다.셀렉터를 구문 분석하고 수정하는 것이 좋은 생각이 아닌 것 같아서, 저는 이 시도를 포기했습니다.

두 번째 시도 - getComputedStyle()

에 @제안한했습니다. - @CollectiveCognition, @CollectiveCognition, @CollectiveCognition에서 시작했습니다getComputedStyle()하지만, 저는 정말 모든 스타일에 인라인을 다는 대신에 CSS 양식 HTML을 분리하고 싶었습니다.

문제 1 - HTML에서 CSS 분리

여기서의 해결책은 매우 아름답지는 않았지만 매우 간단했습니다.선택한 하위 트리의 모든 노드에 ID를 할당하고 해당 ID를 사용하여 적절한 CSS 규칙을 만들었습니다.

문제 2 - 기본값으로 속성 제거

노드에 ID를 할당하면 잘 해결되었지만, 각 CSS 규칙에 최대 300개의 속성이 있어 전체 CSS를 읽을 수 없다는 것을 발견했습니다.
알고 보니getComputedStyle()지정된 요소에 대해 계산된 모든 가능한 CSS 속성 및 값을 반환합니다.일부는 비어 있고 일부는 브라우저 기본값을 가지고 있습니다.기본값을 제거하려면 먼저 브라우저에서 가져와야 했습니다(태그마다 기본값이 다릅니다).해결책은 웹사이트에서 오는 요소의 스타일을 빈칸에 삽입된 동일한 요소와 비교하는 것이었습니다.<iframe>여기서 논리는 빈 공간에 스타일시트가 없다는 것이었습니다.<iframe>추가한 각 요소에는 기본 브라우저 스타일만 있습니다.이렇게 해서 저는 보잘것없는 대부분의 재산들을 없앨 수 있었습니다.

문제 3 - 속기 속성만 유지

다음로제예발것단해속불것인다입니는다있다었니것습쇄되같이게하필요성은이다당는하과음으축에형은가견한예▁next▁waseties▁having▁out▁proper▁that▁(▁unnecess).border: solid black 1px그리고 나서.border-color: black;,border-width: 1px
이 문제를 해결하기 위해 간단한 등가물이 있는 속성 목록을 만들고 결과에서 걸러냈습니다.

문제 4 - 접두사가 붙은 속성 제거

, 저는 많은 있다는 -webkit-들어본 적 없는 접두사가 붙은 속성 (-webkit-app-region?-webkit-text-emphasis-position?).
저는 이 부동산들 중 일부가 유용해 보여서 제가 이 부동산들 중 하나를 보관해야 하는지 궁금합니다(-webkit-transform-origin,-webkit-perspective-origin등). 하지만 저는 이것을 확인하는 방법을 찾지 못했고, 대부분의 경우 이러한 속성이 쓰레기일 뿐이라는 것을 알고 있었기 때문에 모두 제거하기로 결정했습니다.

문제 5 - 동일한 CSS 규칙 결합

한 CSS 각 CSS 규칙에 CSS 규칙이 된다는 것입니다).<li>정확히 같은 스타일로 CSS 출력에 동일한 규칙이 생성되었습니다).
이것은 단지 규칙을 서로 비교하고 속성과 값이 정확히 같은 것들을 결합하는 문제였습니다. 으로적에 에 대신과결.#LI_1{...}, #LI_2{...}받았습니다#LI_1, #LI_2 {...}.

문제 6 - HTML의 들여쓰기 정리 및 수정

만족하여 'html'이라는 단어 인 것처럼 . 그것은 엉망진창으로 보였습니다. 대부분의 이유는outerHTML속성은 서버에서 반환된 형식을 그대로 유지합니다.
하나뿐입니다.outerHTML간단한 코드 재포맷이 필요했습니다.이것은 모든 IDE에서 사용할 수 있는 것이기 때문에, 저는 바로 그렇게 하는 자바스크립트 라이브러리가 있다고 확신했습니다.그리고 제가 옳았다는 것이 밝혀졌습니다.게다가 불필요한 속성 제거가 추가되었습니다(style,data-ng-repeat

문제 7 - 필터 차단 CSS

위에서 언급한 필터가 스니펫의 CSS를 손상시킬 가능성이 있기 때문에, 저는 그것들을 모두 선택 사항으로 만들었습니다.설정 메뉴에서 사용하지 않도록 설정할 수 있습니다.

원래 Chrome(또는 FireFox) 솔루션을 찾고 있는 중에 이 질문을 던졌는데 Internet Explorer 개발자 도구에서 이 기능을 우연히 발견했습니다.제가 찾고 있는 것과 거의 같습니다(자바스크립트 제외).

결과:

웹킷 브라우저(FireBug에 대한 확신 없음)를 사용하면 요소의 HTML을 쉽게 복사할 수 있으므로 이 프로세스의 일부가 방해가 되지 않습니다.

요소에 대한 HTML을 복사하기 전에 (javascript 콘솔에서) 이것을 실행하면 지정된 부모 요소에 대한 모든 계산된 스타일과 모든 자식 요소가 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);

}

그것은 완전한 해킹이고 당신은 통과해야 할 많은 "정크" CSS 속성을 갖게 될 것이지만, 적어도 당신은 시작해야 합니다.

저는 수년 전에 같은 목적으로 이 도구를 만들었습니다.
http://www..com/htmlclipper.htmlhttp ://www.betterprogramming.com/htmlclipper.html

사용 및 개선을 환영합니다.

스크랩북이라고 하는 Firebug 플러그인을 통해 이 작업을 수행할 수 있습니다.

설정에서 Javascript 옵션을 확인할 수 있습니다.

편집:

이것은 또한 도움이 될 수 있습니다.

Firequark는 Firebug의 확장으로 HTML 화면 스크래핑 프로세스를 지원합니다.Firequark는 Firebug(Firebug용 웹 개발 플러그인)를 사용하여 웹 페이지에서 단일 또는 여러 HTML 노드에 대한 CSS 셀렉터를 자동으로 추출합니다.생성된 CSS 셀렉터는 Scrapi와 같은 HTML 화면 스크레이퍼에 입력으로 제공되어 정보를 추출할 수 있습니다.파이어쿼크는 HTML 화면 스크래핑을 위한 CSS 셀렉터의 힘을 발휘하도록 제작되었습니다.

디브클립은 플로렌틴 사르단의 HTML 클리퍼의 업데이트된 버전입니다.

최신 향상 기능 포함: ES5, HTML5, 스코프 CSS...

다음을 사용하여 정형화된 div를 프로그래밍 방식으로 추출할 수 있습니다.

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

즐거운 시간 되세요.

플러그인이 필요하지 않습니다.Internet Explorer 11 기본 개발자 도구를 사용하면 한 번의 클릭으로 매우 간단하게 수행할 수 있습니다.요소를 바로 위에 놓고 해당 요소를 검사한 후 일부 블록을 마우스 오른쪽 단추로 클릭하고 "스타일로 요소 복사"를 선택합니다.아래 이미지에서 볼 수 있습니다.

그것은 css 코드를 매우 깨끗하게 제공합니다.

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

최근에 저는 페이지에서 검사된 요소, html 및 관련 css 및 미디어 쿼리만 복사하기 위한 크롬 확장 "eXtract 스니펫"을 만들었습니다.이것은 실제 관련 CSS를 제공할 것입니다.

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

이에 대한 단일 솔루션이 있는 도구이지만 Firebug와 Web Developer 확장을 동시에 사용할 수 있습니다.

Firebug를 사용하여 필요한 HTML 섹션을 복사하고(Inspect Element) Web Developer를 사용하여 어떤 CSS가 요소와 연관되어 있는지 확인합니다(Web Developer "View Style Information" 호출 - Firebug의 "Inspect Element"처럼 작동하지만 HTML 마크업을 표시하는 대신 해당 마크업과 관련된 CSS를 표시합니다).

원하는 것은 아니지만(모든 항목에 대해 클릭 한 번으로) 상당히 가깝고 최소한 직관적입니다.

파이어버그에도 이 기능이 필요합니다!그때까지 다른 접근법은 이 온라인 서비스를 사용하여 클래스를 제거하고 CSS를 인라인 스타일로 변환하는 것입니다.

http://clipboardjs.com 은 이것을 매우 잘 합니다.비록 복사된 버전이 원본과 똑같아서 그것으로 놀고 배울 수 있을 것이라는 당신의 기대는 현실적이지 않을 수도 있습니다.

웹 페이지에서 원하는 부분을 복사하여 wyswyg 편집기에 붙여넣기만 하면 됩니다.편집기 도구 모음에서 "source" 버튼을 클릭하여 html 소스를 확인합니다.

제가 Drupal 사이트에서 일할 때 가장 쉬운 방법을 찾았습니다.저는 wyswyg CK 에디터를 사용합니다.

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()

저는 투표에서 1위를 차지한 답변을 끌 수 있는 책갈피로 수정했습니다.

이 페이지를 방문하여 "JQuery Code 실행" 단추를 책갈피 줄로 끌어다 놓기만 하면 됩니다.

전체 페이지의 HTML, CSS 등을 저장하는 파이어폭스 플러그인이 있습니다.부분적으로 저장하는 건 본 적이 없어요

IE 5.5는 당신이 찾던 것을 가지고 있었던 것으로 기억합니다 ;)

저는 여기서 답변으로 언급된 모든 도구를 검토했습니다.하지만 그들은 당신이 올려다보고 있던 아름다운 얼굴로 반복되고 더러운 HTML CSS를 제공합니다.그들은 당신에게 JS를 주지 않습니다.

내가 하는 작업:

1. 먼저 페이지에 필요하지 않은 광고를 필터링합니다.
2. 그런 다음 링크 리소스와 함께 전체 웹 페이지를 저장합니다.
3. 불필요한 HTML, CSS 및 JS 제거
4. 하나씩 신중하게 리소스를 연결 해제합니다.

언급URL : https://stackoverflow.com/questions/4911338/tools-to-selectively-copy-htmlcssjs-from-a-specific-element-of-dom