20줄의 코드_기본 지식만으로 CSS 커버리지 테스트 스크립트를 작성할 수 있습니다.-JS 튜토리얼-php.cn

Document.styleSheets는 현재 페이지의 모든 CSS 규칙 모음을 저장합니다. 이를 통해 페이지 에 정의된 모든 선택기를 탐색하고 selectorText 속성에 액세스하여 선택기의 일치 규칙을 얻을 수 있습니다. 그런 다음 규칙 규칙을 document.querySelectorAll에 전달하여 이 규칙과 일치하는 페이지의 요소 목록을 가져옵니다.

여기서는 CSS 규칙만 적용하면 되므로 querySelectorAll().length에 액세스하면 됩니다. 정렬을 통해 각 CSS의 사용법을 확인할 수 있습니다.

코드는 매우 간단합니다.

코드 복사 코드는 다음과 같습니다. var Usage = []; var sheet = document.styleSheets; for(var i = sheet.length - 1; i != -1; i--) { var rule = sheet[i].rules;

for(var j = 규칙 .length - 1; j != -1; j--) { var rule = rule[j]; var text = rule.selectorText;

Usage.push({이름: 텍스트, 개수: document.querySelectorAll(text).length}); } } usage.sort(function(a, b){return a.count - b.count});

for(var i = 사용법.길이 - 1; i != -1; i--) { console.log("선택기: " 사용법[i].name "일치하는 숫자 없음: " 사용법 [ i].count); }

F12를 내쉬고 코드를 콘솔에 붙여넣은 후 Enter를 누르세요.

물론, 권한 문제로 외부에서 가져온 CSS는 어차피 접근이 불가능하므로 지금은 고려하지 않겠습니다. styleSheets를 지원하지 않는 손상된 IE의 경우 Expression 또는 Behavior.htc 사용을 고려하고 나중에 시도해 볼 수 있습니다.

테스트 결과를 게시해 주세요.