仅使用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"}">

我无法访问html只是CSS文件。每个tr元素都会自动生成img urls。

Answer 1

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

最终，浏览器将支持允许指定type参数的new attr syntax。这将允许类似的事情：

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

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

<强>不幸的是：

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

你想要实现的目标是，现在，也可能永远是不可能的。做你想做的事的唯一方法是改变HTML或使用JavaScript。