你能用 CSS 做数据绑定吗？答案

【问题标题】：Can You Do Data Binding With CSS?你能用 CSS 做数据绑定吗？
【发布时间】：2019-12-05 18:00:54
【问题描述】：

我想将 url 从数据库传递到我的 CSS 中以显示正确的图像，你可以这样做吗？

例如，现在我在 HTML 中有这个：

<div class="img-bg bg-6 bg-grad-layer-6"></div>

还有这个 CSS 中的 bg-6：

.bg-6{ background: url(../images/slider-6-450x600.jpg) no-repeat center; background-size: cover; }

我已经可以访问我的数据库并且我知道如何获取存储的照片的 url，无论如何我可以将 url 传递到 bg-6 以在 url（此处为数据库 url）中使用，而不是那个静态文件？？

【问题讨论】：

【解决方案1】：

您可以设置内联样式。

来自 ejs 的示例。

<div class="img-bg bg-6 bg-grad-layer-6" style="background-image:url('<%= data %>');"></div>

这适用于任何其他语言。

或者可以上课。

<style>
.bg-6{ background: url('<%= data %>') no-repeat center; background-size: cover; }
</style>

【讨论】：

【解决方案2】：

Web 浏览器缓存 css 文件。如果您每次有人访问您的网站时都更改您的 css 文件，那么他们可能无法在每次访问时都获得最新数据。您可以将服务器设置为告诉浏览器不要缓存文件，但这样会增加额外的开销并消除缓存的真正好处。

您应该只使用一个好的 css 文件，然后用您的服务器语言（例如 PHP）或 JavaScript 更新网址。

在 JavaScript 中，您可以使用 element.style.backgroundImage = "url('../images/slider-6-450x600.jpg')";，其中 element 是对您要更改的元素的引用。

在 PHP 中，您可以添加内联样式属性，例如 <div style="background-image: url('../images/slider-6-450x600.jpg')"></div>。

如果您想更改整个类的值，您可以使用 PHP 之类的工具在文档顶部添加带有自定义值的 <style> 标记。

【讨论】：