Question

我正在使用WordPress。插件具有php代码段，这些代码段一旦加载到html中，就会根据用户的选择创建字符串。我想在CSS中使用这样的字符串。我已经尝试过Right-way-for-pass-variable-php-to-css-in-wordpress，但是将CSS样式表与PHP代码一起作为style.php无效（也许来自Wordpress主题的某些干扰）。

还有另一种方法吗？

Answer 1

这是一个可行的解决方案：

将产生字符串的php代码放入始终加载的页面的php文件中（例如header.php）。分配一个ID。

undefined

使用CSS使普通用户看不到它产生的html字符串：

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

使用JavaScript捕获加载的字符串以创建CSS变量：

 #myid {
display: none;
}

警告：必须在JavaScript之前加载php内容，否则相应的JavaScript变量将为null。如果将php段放在标题中，请在调用JavaScript之前执行此操作。如果将其放在下面或页面的另一部分，请将上面的代码放在事件侦听器“加载”中。

这将创建CSS代码：

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

该字符串随后可被其他CSS属性使用：

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

其作用类似于：

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

警告：如果要使用CSS属性为“ content”的字符串，创建CSS变量将无效，因为content不接受var（）作为值。

但是我发现了一个骇客，因为内容接受attr（）作为值。将JavaScript更改为：

main {
attribute: string-produced;
}

这将HTML global attribute（允许任何HTML元素使用）“ title”分配给div myid，并为其赋予php字符串值。您可以选择任何全局属性。

这将创建HTML代码：

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

警告：在JavaScript中，您必须将标题属性分配给具有您要向其中添加“内容”属性的类或ID的元素：

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

这使以下成为可能：

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

其作用类似于：

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

如何使php产生的动态内容可用于CSS？

1 个答案: