jStyler

jQuery используется для генератора CSS. Он применяется в приложениях, связанных с UI / UX. Чтобы применить CSS к выбранным пользователем значениям для целевого элемента.

Полезно ли это?

Это полезно в случае: — Если вы получаете background-color, color, font-size, line-height и т. д. от пользователя и применяете их в файле вывода. Тогда этот код является прототипом для FrontEnd & BackEnd. — Расширяет гибкость существующего кода.

Как использовать?

Добавьте атрибут данных data-jstyler к целевому элементу.

Цели:

— Он применяет либо self (по умолчанию), либо целевой селектор CSS. — Использует сгенерированный CSS для нормального (по умолчанию) или hover просмотра.

Пример:

А) БАЗОВЫЙ:

Этот пример применяет нормальный CSS к self.

<div data-jstyler='{"background-color":"red","color":"orange"}'> jStyler </div>

То же самое с ShortHand:

<div data-jstyler='{"bg":"red","c":"orange"}'> jStyler </div>

A.1) JSON-объект для normal:

Этот пример применяет CSS с JSON-объектом normal к self:

<div data-jstyler='{normal:{bg:"green",c:"red",}'> jStyler </div>

А.2) JSON-объект для normal и hover:

Этот пример применяет CSS с JSON-объектом normal и hover к self:

<div data-jstyler='{normal:{bg:"green",c:"red",},hover:{bg:"red",c:"green",}'> jStyler </div>

B) Селектор CSS:

Этот пример применяет CSS к self для селектора CSS .abc:

<div data-jstyler='{"background-color":"red","color":"orange"}' data-jstyler-selector=".abc"> jStyler </div>