JavaScript. Как вытянуть содержимое .css файла?

Question

makalapa @makalapa

JavaScript

JavaScript. Как вытянуть содержимое .css файла?

Доброго времени!
Кто нибудь знает способ как из подключенного .css файла в head
...
<head>
<link href="serv2/mycss.css" rel="stylesheet" type="text/css" />
</head>
....
вытянуть его содержимое средствами .js?

с поправкой: вытянуть без запросов и скачивания, прямо с кеша браузера скажем так.

Вопрос задан более трёх лет назад
185 просмотров

Комментировать

Подписаться Сложный Комментировать

Решения вопроса 1

7 комментариев

Kovalsky @lazalu68

То есть содержимое css может быть недоступно для клиентского js если ресурс защищен cors?

Написано более трёх лет назад
Дмитрий Беляев @bingo347 Куратор тега JavaScript

Kovalsky, да, если ресурс с другого домена, то сторонний сервер должен отдавать CORS заголовки, а к тегу link нужно прописать атрибут crossorigin="anonymous" чтобы CSSOM данного styleSheet был доступен

Написано более трёх лет назад
Антон Швец @Xuxicheta
Еще можно получить ссылку на элемент и прочитать у него $0.sheet.cssRules
Но тоже самое, если стили с другого домена, то в js они будут недоступны.

Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet'
Написано более трёх лет назад
Дмитрий Беляев @bingo347 Куратор тега JavaScript
Антон Швец, document.styleSheets это на самом деле что-то вроде агрегации всех стилей на странице, все равно что Вы сделаете
const styleSheets = [...document.querySelector('style, link[rel=stylesheet]')].map(s => s.sheet)
только еще и реагирует на изменения в DOM
Написано более трёх лет назад
makalapa @makalapa Автор вопроса

Дмитрий Беляев, необходимо получить не значение/объект, а содержимое стилей в виде строки (без запросов XMLHttpRequest, fetch и т.п.)

вытянуть с браузера, после загрузки страницы
с какой стороны вообще можно подойти?

Написано более трёх лет назад
Антон Швец @Xuxicheta

Дмитрий Беляев, ну, это очевидно :)

Написано более трёх лет назад

Дмитрий Беляев @bingo347 Куратор тега JavaScript

makalapa,

const allAvailableStylesText = [...document.styleSheets].flatMap(sheet => {
  try {
    return [...sheet.cssRules];
  } catch {
    return [];
  }
}).map(rule => rule.cssText).join('');
console.log(allAvailableStylesText);

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- 8 часов назад
- 65 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- 8 часов назад
- 38 просмотров
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- 8 часов назад
- 20 просмотров
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 1 подписчик
- 13 часов назад
- 51 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- вчера
- 66 просмотров
1

ответ
JavaScript

Простой
Как получить результат отправки на сервер, если fetch-запрос был в одной функции, а результат нужен в другой?
- 1 подписчик
- вчера
- 76 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Существуют ли браузерные реализации WebView для AJAX и Fetch?
- 1 подписчик
- вчера
- 86 просмотров
1

ответ
JavaScript

Простой
Как обрабатывать пользовательский запрос больше не показывать конкретный попап?
- 1 подписчик
- вчера
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- 22 апр.
- 588 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Запуск установки приложения PWA при загрузке страницы?
- 2 подписчика
- 21 апр.
- 216 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Модель управления электродвигателем в Matlab, Simulink

24 апр. 2024, в 06:52

5000 руб./за проект

Анимация логотипа

24 апр. 2024, в 00:08

20000 руб./за проект

Разработка дизайна раздела «Статьи» на сайте «Мир отходов»

23 апр. 2024, в 23:01

10000 руб./за проект

Answer 1 · 2020-04-03 18:21:26

Если стили на нашей странице, то через CSSOM (хорошо гуглится)
Так же можете поисследовать в консольке document.styleSheets
Ну и нужно учитывать, что для кроссдоменных стилей нужен CORS

JavaScript. Как вытянуть содержимое .css файла?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт