Question

我有以下HTML代码：

<td data-label="https://www.example.com/myimage.jpg">
    <span>3</span>
</td>

在我的CSS中，我希望得到data-label属性并将其用于CSS内容，如下所示：

content: url("attr(data-label)");

但是，这不起作用。我尝试了几种方法，但我无法显示图像。

只使用......

content: url("https://www.example.com/myimage.jpg");

......就像一个魅力！

有什么想法吗？这有可能吗？

Answer 1

我担心你无法将url()和attr()合并。

这意味着单独使用CSS无法达到预期的效果。

但是，您只需使用一些JavaScript代码就可以实现它：

var attribute = "data-label";
var elements = document.querySelectorAll("["+attribute+"]");

for (var i = 0; i < elements.length; i++) {
  elements[i].style.content="url("+elements[i].getAttribute(attribute)+")";
}

<table>
  <tr>
    <td data-label="https://i.stack.imgur.com/mRsBv.png?s=328&g=1">
      <span>3</span>
    </td>
  </tr>
  <tr>
    <td data-label="https://www.gravatar.com/avatar/a42287aaa5cd72c0d29dd65f065e9c51?s=328&d=identicon&r=PG&f=1">
      <span>3</span>
    </td>
  </tr>
</table>

根据属性值设置css内容和url

1 个答案: