将calc（）与attr（）结合在CSS中 [英] Combine calc() with attr() in CSS

问题描述

我想知道是否可以将calc（）函数与attr（）函数结合使用以实现如下所示：

I was wondering whether I can combine the calc() function with the attr() function to achieve something like the following:

<div class="content" data-x="1">
    This box should have a width of 100px
</div>

<div class="content" data-x="2">
    This box should have a width of 200px
</div>

<div class="content" data-x="3">
    This box should have a width of 300px
</div>

CSS

.content{
    //Fallback. If no calc is supported, just leave it at 100px
    width: 100px;
}


.content[data-x]{
    // Multiply the width of the element by the factor of data-x
    width: calc(100px * attr(data-x));
}

草稿表示应该可以，但是在我的情况下（Chrome 31.0.1650.63 m和Firefox 25.0.1）却无效。则有两种情况：

The draft says it should work, but in my case (Chrome 31.0.1650.63 m and Firefox 25.0.1 ) it doesn't. There are two cases then:

1. 我做错了


2. 尚不支持
   

这是怎么回事？

小提琴示例

推荐答案

现在attr默认情况下，任何主流浏览器都不支持（）除了内容之外的任何属性。在此处了解更多信息： https://developer.mozilla.org/zh-CN/docs/ Web / CSS / attr

Right now attr() is not supported by default in any major browser for any attributes other then "content". Read more about it here: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

这篇关于将calc（）与attr（）结合在CSS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！