Как сделать динамический контент, созданный php, доступным для CSS? - PullRequest
Новая
       21

Как сделать динамический контент, созданный php, доступным для CSS?

0 голосов
/ 31 марта 2019

Я использую WordPress. Плагин имеет сегменты php-кода, которые после загрузки в html создают строки в зависимости от выбора пользователя. Я хотел бы использовать такие строки в CSS. Я уже пробовал Right-way-for-pass-variable-php-to-css-in-wordpress , но включение таблицы стилей CSS с кодом PHP в качестве style.php не работает (возможно, что-то из Тема Wordpress мешает).

Есть ли другой способ сделать это?

1 Ответ

0 голосов
/ 31 марта 2019

Вот рабочее решение:

Поместите код php, который генерирует строку, в файл php страницы, которая всегда загружается (например, header.php). Назначьте ID. 

<div id="myid"><?php produces-a-string ?></div>

Сделать HTML-строку, которую он создает, невидимой для обычного пользователя с помощью CSS: 

 #myid {
display: none;
}

Захватите загруженную строку с помощью JavaScript, чтобы создать переменную CSS: 

var grab = document.getElementById("myid");
var text = grab.innerText;
grab.setProperty("--grabbed", text);

Внимание: содержимое php должно быть загружено до JavaScript, иначе соответствующая переменная JavaScript будет нулевой. Если вы поместили сегмент php в заголовок, сделайте это до того, как он вызовет JavaScript. Если вы разместите его ниже или в другой части страницы, поместите указанный выше код в прослушиватель событий «load».

Это создает код CSS: 

#myid {
--grabbed: string-produced;
}

Строка может затем использоваться другими атрибутами CSS: 

main {
attribute: var(--grabbed);
}

который действует как: 

main {
attribute: string-produced;
}

Внимание: если вы хотите использовать созданную строку с атрибутом CSS «content», создание переменной CSS не работает, так как контент не принимает var () в качестве значения.

Но я нашел взлом, так как контент принимает attr () в качестве значения. Изменить JavaScript на: 

var grab = document.getElementById("myid");
var text = grab.innerText;
grab.setAttribute("title", text);

Это присваивает глобальному атрибуту HTML (разрешено для любого элемента HTML) «title» для div myid, давая ему значение строки php. Вы можете выбрать любой глобальный атрибут.

Это создает HTML-код: 

<div id="myid" title="string-produced"></div>

Внимание: в JavaScript вы должны назначить атрибут title для элемента с классом или идентификатором, для которого вы хотите добавить атрибут «content»: 

document.getElementBy(id-where-content-is-added).setAttribute("title", text);

Это делает возможным следующее: 

#id-where-content-is-added {
content: attr(title);
}

, который действует как: 

#id-where-content-is-added {
content: string-produced;
}
...