Czasami muszę wydrukować listę klas CSS, aby znaleźć odpowiednią.Jak uzyskać listę wszystkich załadowanych klas CSS w przeglądarce Google Chrome?
Najbardziej odpowiednia dla mnie byłaby funkcja taka jak w konsoli JS: lista klas JS jest ładowana i filtrowana podczas pisania.
Na przykład, jeśli potrzebuję zapamiętać klasę obrazu, wpisuję "Img", a następnie ładuję listę klas obrazów ("ImgFolder", "ImgPencil" ...).
var allTags = document.body.getElementsByTagName('*');
var classNames = {};
for (var tg = 0; tg< allTags.length; tg++) {
var tag = allTags[tg];
if (tag.className) {
var classes = tag.className.split(" ");
for (var cn = 0; cn < classes.length; cn++){
var cName = classes[cn];
if (! classNames[cName]) {
classNames[cName] = true;
}
}
}
}
var classList = [];
for (var name in classNames) classList.push(name);
alert(classList);
Źródło: http://snipplr.com/view/6488/
Kod da ci listę wszystkich klas na stronie w tablicy. To powinno wystarczyć, aby zacząć. Jeśli potrzebujesz pomocy z filtrowaniem zajęć, zostaw komentarz, a ja edytuję odpowiedź.
EDYCJA: źle zrozumiałem pytanie. https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets
nie masz zrozumiał moje pytanie. Mówię o wszystkich klasach, które można załadować tonami zewnętrznych plików CSS, a nawet nie zastosować ich do żadnego elementu HTML. – gumkins
https://developer.mozilla.org/en-US/docs/Web/API/document.styleSheets –
Tak, wiem, że istnieje taka właściwość, na pewno można wyodrębnić głębsze tablice i przetworzyć je poprawnie, ale jestem szukając pewnego rodzaju rozszerzenia przeglądarki, robiąc to ładnie, sugerując listę klas przefiltrowanych. – gumkins
Ciekawa lektura na to pytanie: http://stackoverflow.com/questions/9320982/reading-documents-css-in-chrome-extension - w zasadzie nie sposób odczytać zewnętrznych arkuszy stylów bez użycia serwera proxy – CodingIntrigue