Получить все классы CSS стилей проекта

@andyj · Регистрация: 16.03.2017

Студворк — интернет-сервис помощи студентам

Добрый день, подскажите плииииз.

В сложном проекте хочу получить все "используемые" проектом или определенным элементом CSS стили.

Причем в идеале в виде "исходников" или хотя-бы "названий классов", "составных классов", с "приставками" :hover, :focus и без...

Такое в принципе возможно???

Умею получать ВСЕ текущие параметры стиля определенного элемента. Это огромный объект с несколькими сотнями параметров, большинство из которых "дефолтные" = 0px.

Хочу как в Хроме - наступил на элемент и вижу все классы "влияющие на текущий элемент" и их "начинку", но... js-КОДОМ!

@atanov · 28.09.2019, 20:10

andyj, получаете все DOM элементы, далее перебираете эту коллекцию и для каждого элемента коллекции выводите содержимое style - это также объект и его придётся перебирать.

@andyj · 28.09.2019, 20:19 **[ТС]**

Сообщение от atanov

получаете все DOM элементы, далее перебираете эту коллекцию и для каждого элемента коллекции выводите содержимое style - это также объект и его придётся перебирать.

Это понятно... это самый примитивный вариант!

А готового "парсера" для этого нет? Хром ведь как-то показывает только те стили, что влияют на ТЕКУЩИЙ элемент! Типа "влияют эти 3 класса, причем в таком порядке" и эти классы лежат в таких исходниках.

Теоретически я хоть 3 раза могу в ДОМ подгрузить один CSS-файл. А влиять будет только последний... Самому такой парсер писать - для меня тяжело! Я не достаточно хорошо знаю правила парсинга css (приоритеты, наложения классов)...

@amr-now · 28.09.2019, 20:20

andyj, atanov, не получится.
В скрипте стили не будут соответствовать тому, что отображает панель Хрома. Тоже мучался.

@andyj · 28.09.2019, 20:27 **[ТС]**

А ведь кроме CSS файлов

HTML5
1
<link rel="stylesheet" href="my_1.css">

может быть что-нибудь вписано в теги

HTML5
1
2
3
4
5
<style>
.myclass{
  background: #F00;
}
</style>

Добавлено через 3 минуты
И конечно могут быть стили вида

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <style>* {
  }
 
  * * * {
  }
 
  div {
  }
 
  div {
    span {
    }
  }
 
</style>

Хром это быстро вычисляет... а мне надо под каждый вариант парсер писать. Да еще и  и /**/ игнорировать. Короче - полноценный парсер! ((

@andyj · 29.09.2019, 15:48 **[ТС]**

похоже нашел.

Оставлю здесь самые удачные советы...
http://www.brothercake.com/sit... utilities/
https://stackoverflow.com/ques... an-element
https://stackoverflow.com/ques... javascript

@amr-now · 29.09.2019, 15:55

andyj, чтобы не гадать, выложите здесь правильный ответ на свой вопрос.
От советов до конечного результата обычно бывает огромное расстояние.

Это как я искал количество полных лет между двумя датами.
Десятки программистов били себя пяткой в грудь, что у них правильный алгоритм.
А как выяснялось, лживый у них алгоритм. Врёт.

@andyj · 29.09.2019, 16:15 **[ТС]**

Сообщение от amr-now

выложите здесь правильный ответ на свой вопрос.

У меня нет "правильного ответа"! ))
2,3 ссылка получают список всех классов доступных странице с "исходниками" - заготовка для парсинга
1я ссылка дает готовый инструмент (+zip) который уже на сайте позволяет получить классы/стили выбранного элемента. Проверил - в примерах тоже есть такое решение (теоретически можно встроить в любую страницу - внимание - сработало только с сайта, а не с file://). Бонус - как и в Хроме "зачеркивает" не используемые стили. Возможно они написали тот самый парсер, где учли все правила наложения классов один на другой... еще не разбирался!

Теперь предстоит долгая работа по изучению этих инструментов... Учитывая что это не основной проект, а "личный" - могу растянуть на несколько месяцев...

Не по теме:

Конечная цель была написать "оптимизатор" - выявить все не используемые в компонентах стили, которые "забыл убрать" или не нужны для ЭТОГО проекта (иногда целую радугу встраиваю в заготовки тех-же дизайнов кнопки, а реально использую 2-3 вида = можно в 5-6 раз иногда сжать/"урезать" CSS файл), но для этого надо проверять все доступные стили, а потом отмечать в этом списке "уже используемые", причем учитывать :hover, :focus. И где-нибудь это "накапливать" - в локалсторэдж, на сервере через ajax, в некой таблице для пакетной отправки... = проект СЛОЖНЫЙ, с кучей мелочей...= на долго! ))

@shvyrevvg · 29.09.2019, 17:48

Не по теме:

andyj, интересно, как эти штуки работают со стилями, которые добавляются динамически.

@andyj · 29.09.2019, 18:09 **[ТС]**

Сообщение от shvyrevvg

интересно, как эти штуки работают со стилями, которые добавляются динамически.

нужны тесты... (( МНОГО тестов! на разных проектах. Например простым добавлением тестового модуля...
Все зависит от сложности парсера! Там 5100 (не сжатых) строк кода, 187кб.

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

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@andyj 274 / 178 / 30 Регистрация: 16.03.2017 Сообщений: 1,631

	Получить все классы CSS стилей проекта 26.09.2019, 18:37. Показов 1296. Ответов 9 Метки нет (Все метки) Добрый день, подскажите плииииз. В сложном проекте хочу получить все "используемые" проектом или определенным элементом CSS стили. Причем в идеале в виде "исходников" или хотя-бы "названий классов", "составных классов", с "приставками" :hover, :focus и без... Такое в принципе возможно??? Умею получать ВСЕ текущие параметры стиля определенного элемента. Это огромный объект с несколькими сотнями параметров, большинство из которых "дефолтные" = 0px. Хочу как в Хроме - наступил на элемент и вижу все классы "влияющие на текущий элемент" и их "начинку", но... js-КОДОМ! 0

@atanov 640 / 481 / 172 Регистрация: 26.05.2016 Сообщений: 2,674
	28.09.2019, 20:10
	andyj, получаете все DOM элементы, далее перебираете эту коллекцию и для каждого элемента коллекции выводите содержимое style - это также объект и его придётся перебирать. 1

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	28.09.2019, 20:20
	andyj, atanov, не получится. В скрипте стили не будут соответствовать тому, что отображает панель Хрома. Тоже мучался. 0

@andyj 274 / 178 / 30 Регистрация: 16.03.2017 Сообщений: 1,631
	29.09.2019, 15:48 [ТС]
	похоже нашел. Оставлю здесь самые удачные советы... http://www.brothercake.com/sit... utilities/ https://stackoverflow.com/ques... an-element https://stackoverflow.com/ques... javascript 0

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	29.09.2019, 15:55
	andyj, чтобы не гадать, выложите здесь правильный ответ на свой вопрос. От советов до конечного результата обычно бывает огромное расстояние. Это как я искал количество полных лет между двумя датами. Десятки программистов били себя пяткой в грудь, что у них правильный алгоритм. А как выяснялось, лживый у них алгоритм. Врёт. 0

@shvyrevvg
	29.09.2019, 17:48
	Не по теме: andyj, интересно, как эти штуки работают со стилями, которые добавляются динамически. 0