我进行了相当多的搜索，但没有找到任何最新的有用答案。
我的问题是是否可以将变量从 HTML(可能使用数据属性)传递到 CSS？
我的用例是我有品牌页面，我想使用媒体查询来显示每个品牌使用媒体查询的供应商特定背景。我知道你不能在内联 CSS 中使用媒体查询，但我同样不想在我的样式表中创建大约 100 个媒体查询。
在我的 HTML 页面上，我可以访问供应商背景 URL 的对象，所以如果我可以以某种方式将它们传递到单个 CSS 媒体查询中而不执行任何 JavaScript，那就太好了。
最佳答案
您可以使用 CSS 变量来做到这一点(a.f.a.i.k。没有其他方法)。
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
它会像这样工作:
- 将 CSS 变量附加到您的 HTML 标记:
<html style="--variable:'your_fallback_image.jpg'"> - 动态地使用 URL 填充该变量(对于本例而言，如何操作无关紧要)
- 创建将设置背景的 CSS(包装在媒体查询中)
类似下面的内容:
@media screen and (width:64rem){
background-image: url(--variable);
}
现在它应该在更改 URL 时相应地更新，并设置一个默认值以防您的动态解决方案不起作用。希望有所帮助。
关于css - 将 HTML 变量传递给 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55223623/