如何使用CSS中的HTML數據屬性作爲屬性？

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其他屬性的支持是實驗性的。