如何在CSS中使用HTML数据属性作为属性？ [英] How can I use the HTML data attribute in CSS as a property?

问题描述

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

How can I use attr() to select the data attribute and set various CSS properties based off the value? For example I have this jsfiddle http://jsfiddle.net/rh1vfmso/ - I set the width via data-width then try to set it via width: attr(data-width);

设置它。内容作为属性，但没有别的。如何根据HTML中的属性中设置的宽度设置宽度？

It works when I set the content as the attribute but nothing else. How would I be able to set the width based off what's set in the attribute in 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>

推荐答案

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

Support would depend on the given browser's implementation. If it's not working, then it's not currently supported.

根据 MDN ，支持除内容之外的属性是实验性的：

According to MDN, support for properties other than content is experimental:

attr（）函数可用于任何CSS属性，但支持内容以外的属性是实验性的。

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

这篇关于如何在CSS中使用HTML数据属性作为属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！