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

Question

makalapa @makalapa

JavaScript

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

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

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

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

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

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

Решения вопроса 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

Средний
Как вывести сразу 2 месяца в календаре datapicker?
- 1 подписчик
- 11 часов назад
- 44 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Нужен ли JavaScript пентестеру?
- 1 подписчик
- вчера
- 160 просмотров
2

ответа
JavaScript

Простой
Как вывести число столько раз, сколько написано в input?
- 2 подписчика
- вчера
- 186 просмотров
3

ответа
JavaScript

+3 ещё

Средний
Как спарсить данные с помощью 2Captcha и SpringBoot?
- 1 подписчик
- вчера
- 64 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как определить время выполнения запроса post?
- 1 подписчик
- вчера
- 96 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как получить bitrix_sessid в js без подключения js-библиотеки Bitrix?
- 2 подписчика
- 06 янв.
- 103 просмотра
1

ответ
JavaScript

Простой
Как передать событие клика по пуш-уведомлению в формате Ajax для увеличения счётчика кликов?
- 1 подписчик
- 05 янв.
- 36 просмотров
1

ответ
JavaScript

Простой
Как достать нужную информацию с querySelector из shadowRoot(open) Tampermonkey?
- 1 подписчик
- 05 янв.
- 45 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему onClick срабатывает два раза?
- 1 подписчик
- 01 янв.
- 281 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как запустить языковую модель на JavaScript?
- 2 подписчика
- 01 янв.
- 2440 просмотров
1

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

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Разработать модуль ТГ для биржи OKX

08 янв. 2025, в 12:26

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

Требуется дизайнер для разработки дизайна сайта продажи автозапчастей

08 янв. 2025, в 12:01

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

Провести платную консультацию с дизайнером сайтов

08 янв. 2025, в 11:51

500 руб./в час

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

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

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

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

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

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