Получить переменные цвета CSS из файла JSON
Как я могу использовать JS для установки переменных CSS (:root) из файла JSON?
Формат моих данных следующий:
css_json:
{
--design-white: “#f1f2f9”
--main-flamingo: “#8e24aa”
}
Мои переменные будут использоваться в качестве примера следующим образом: цвет: var(--main-flamingo). Какой вариант может быть более гибким в моей ситуации?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете установить переменные CSS, используя setProperty:
document.documentElement.style.setProperty("--main-flamingo", "#fc8eac");
Чтобы получить значение, используйте getPropertyValue:
document.documentElement.style.getPropertyValue("--main-flamingo");
Часть JSON можно выполнить с помощью JSON.parse:
const rawJson = `{
"--design-white": "#f1f2f9",
"--main-flamingo": "#8e24aa"
}`;
const parsed = JSON.parse(rawJson);
document.documentElement.style.setProperty(
"--main-flamingo",
parsed["--main-flamingo"],
);
и для цикла по объекту вы можете прочитать этот вопрос: stackoverflow.com/questions/921789/…
@tacoshy, вы правы, можно использовать fetch для загрузки JSON, другой вариант — использовать import. Поскольку в вопросе на самом деле не упоминалось, как получить JSON или было ли это уже получено, я воздержался от некачественного ответа. Более того, вопрос явно сосредоточен на переменных CSS, а не на JSON.
Я также не уверен, откуда вы берете эту часть из «OP хочет правильно установить переменные CSS в таблицу стилей, а не в документ HTML», поскольку вопрос просто просит установить переменную CSS («Как я могу использовать JS для установки Переменные CSS (:root) из файла JSON?"). Поскольку вопрос не конкретизировался, я просто предложил известный мне метод :)
Хорошо, это та реализация, которую я искал. Есть только одна маленькая деталь. Добавление всех переменных прописано в html-теге style, что не критично, но хотелось бы узнать, есть ли возможность как-то скрыть стили оттуда? Вероятно, именно это и делал :root, и теперь мы добавляем стили непосредственно в главный тег.
ты пропустил несколько шагов. Прежде всего, вам нужно
fetchполучить JSON с сервера. Затем вам нужно проанализировать его до обычного объекта, а затем вам нужно пройти по объекту. ТАКЖЕ, ОП хочет правильно установить переменные CSS в таблицу стилей, а не в документ HTML, что можно сделать с помощью третьего ответа: stackoverflow.com/questions/37801882/…