html - 仅使用 CSS 从 HTML 属性获取特定值

Question

我想知道是否可以仅使用 CSS 获取 img_url 值，以便我可以将图像用作每个 tr 元素的背景。

<tr class="title-row" id="title-49042" data-title-id="49042" data-attrs="{"global_rates":{"total":9.1099999999999994,"story":9.0299999999999994,"graphics":8.9199999999999999,"music":8.6799999999999997,"titlecahracters":9.0800000000000001},"img_url":"\/res\/images\/100x100\/208614.jpg"}">

我只能访问 CSS 文件的 html。 img url 是为每个 tr 元素自动生成的。

Answer 1

假设您打算在 data-attr 中转义这些引号以使其成为有效的 HTML，这是不可能的。

最终，浏览器将支持 new attr syntax允许指定一个 type 参数。这将允许这样的事情:

div {
  height: 200px;
  width: 200px;
  background: attr(data-img url);
}

<div data-img="https://unsplash.it/200"></div>

不幸的是:

1. 截至撰写本文时，尚无浏览器支持此功能。
2. 即使他们这样做了，也无法仅使用 CSS 从属性中提取 JSON 值。

您正在努力实现的目标目前是不可能的，而且可能永远是不可能的。做您想做的事情的唯一方法是更改​​ HTML 或使用 JavaScript。