Question

如何使用attr()选择数据属性并根据值设置各种CSS属性？例如，我有这个jsfiddle http://jsfiddle.net/rh1vfmso/ - 我通过数据宽度设置宽度然后尝试通过width: attr(data-width);

设置它

当我将内容设置为属性但没有其他内容时，它可以正常工作。我如何根据HTML中属性中的设置来设置宽度？

<style type='text/css'>
input[type='checkbox']:checked ~ .size:before {
  content: attr(data-width);
  display: block;
  height: 30px;
  background-color: red;
  width: attr(data-width);
  /*width: 100px;*/
}
</style>

<div>    
  <input type='checkbox' id='resize'>
  <label for='resize'>Resize</label>
  <div class="size" data-width=100px></div>
</div>

Answer 1

支持取决于给定浏览器的实现。如果它不起作用，则目前不支持。

根据MDN，对content以外的属性的支持是实验性的：

attr()函数可以与任何CSS属性一起使用，但对content以外的属性的支持是实验性的。

如何在CSS中使用HTML数据属性作为属性？

1 个答案: