특정 DOM 요소에서 HTML, CSS 및 JS를 어떻게 선택적으로 복사합니까?

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

웹 페이지 소스를 검사하는 것은 웹 개발자에게 일반적인 관행이지만, 로컬 수정을 위해 특정 섹션을 복사하는 것은 번거로울 수 있습니다. 이 문서에서는 DOM의 원하는 요소에서 HTML CSS JS를 선택적으로 복사하는 도구와 기술을 살펴봅니다.

SnappySnippet: 사용자 정의 솔루션

이 문서의 작성자는 SnappySnippet을 만들었습니다. , 마지막으로 검사한 DOM 노드에서 HTML CSS JS를 추출하는 기능을 제공하는 Chrome 확장 프로그램입니다. 이 도구는 CSS 최적화, 코드 정리, CodePen 및 JSFiddle에 대한 직접 코드 공유 등의 추가 기능을 제공합니다.

기타 기능

SnappySnippet에는 다음 기능이 포함되어 있습니다.

• HTML 정리 및 들여쓰기
• 가독성을 위한 CSS 최적화
• 사용자 정의 및 필터링 옵션
• 의사 요소 처리(::before, ::after)
• 직관적인 사용자 인터페이스

구현 세부 정보

SnappySnippet 구현에는 여러 가지 과제와 솔루션이 포함되었습니다.

문제 1: HTML에서 CSS 분리

CSS를 분리하려면 작성자는 선택한 하위 트리의 노드에 ID를 할당하고 해당 ID를 사용하여 해당 CSS를 생성했습니다. rule.

문제 2: 기본값 제거

getComputeStyle()을 사용하면 비어 있거나 기본값인 CSS 속성이 많이 생성됩니다. 이 문제를 해결하기 위해 저자는 웹사이트 컨텍스트의 요소 스타일과 기본 브라우저 스타일이 적용되는 빈 iframe의 요소 스타일을 비교했습니다.

문제 3: 단축 속성만 유지

약식 속성(예: border-color)이 출력에 중복되었습니다. 작성자는 속기 속성이 포함된 속성 목록을 사용하여 이를 필터링했습니다.

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

접두사가 붙은 속성(예: -webkit-transform-origin) 일반적인 사용에는 불필요한 것으로 간주되었습니다. 작성자는 단순화를 위해 모두 제거했습니다.

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

동일한 속성과 값을 가진 여러 CSS 규칙이 출력에 나타났습니다. 이러한 규칙을 결합하면 그 수가 크게 줄었습니다.

문제 6: HTML 정리

outerHTML 속성은 형식이 지정되지 않은 HTML 콘텐츠를 반환했습니다. 저자는 코드 형식 변경 및 불필요한 속성 제거를 위해 JavaScript 라이브러리(jquery-clean)를 통합했습니다.

문제 7: CSS를 깨는 필터

선택적 필터가 SnappySnippet에 추가되었습니다. CSS 파손을 방지합니다. 사용자는 설정 메뉴에서 이러한 필터를 비활성화할 수 있습니다.

SnappySnippet 코드는 추가 탐색 및 사용자 정의를 위해 GitHub에 공개되어 있습니다.

위 내용은 특정 DOM 요소에서 HTML, CSS 및 JS를 어떻게 선택적으로 복사합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!