我希望left css属性使用attr从html元素获取值,如下所示
left
attr
<div left-value="30px"/> div{ left: attr(left-value); }
这有可能吗?,它对之前和之后都有效.
inn6fuwd1#
attr css函数看起来非常强大,但也非常有限,如下所述:https://developer.mozilla.org/en-US/docs/Web/CSS/attr注意:attr()函数可以用于任何CSS属性,但是对内容以外的属性的支持是实验性的,对type-or-unit参数的支持也是稀疏的。不管怎样,你可以使用一个技巧来得到完全相同的结果,但是使用css自定义属性,而不是在html元素上定义一个属性,你将在你的css规则中使用attr来读取,你可以使用内联样式在一个自定义属性上设置相同的值,然后在你的规则中使用那个自定义属性来设置元素的left属性。在这里我还放置了一个具有相对位置的容器,以更好地突出此解决方案的正确工作:
.container{ position: relative; border: dashed 4px lightgray; height: 100vh; width: 100vw; } .container > div{ position: absolute; left: var(--left-value); border: solid 1px gray; background: red; width: 20px; height: 20px; }
<div class="container"> <div style="--left-value: 20px;"></div> </div>
当然,使用自定义属性而不是直接使用left属性看起来并不明智,因为您已经在使用内联样式了。在某些情况下,这种解决方案可能是可行的方法...但在这里,它确实没有真正改变游戏规则
lymnna712#
首先,HTML中没有left-value这样的属性,你必须在HTML中使用pre-build attr,因为它不是react。其次,如果你想左对齐,只需使用css的position和left attr,或者使用margin-left做一些样式。
2条答案
按热度按时间inn6fuwd1#
attr css函数看起来非常强大,但也非常有限,如下所述:
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
注意:attr()函数可以用于任何CSS属性,但是对内容以外的属性的支持是实验性的,对type-or-unit参数的支持也是稀疏的。
不管怎样,你可以使用一个技巧来得到完全相同的结果,但是使用css自定义属性,而不是在html元素上定义一个属性,你将在你的css规则中使用
attr
来读取,你可以使用内联样式在一个自定义属性上设置相同的值,然后在你的规则中使用那个自定义属性来设置元素的left属性。在这里我还放置了一个具有相对位置的容器,以更好地突出此解决方案的正确工作:
当然,使用自定义属性而不是直接使用left属性看起来并不明智,因为您已经在使用内联样式了。在某些情况下,这种解决方案可能是可行的方法...但在这里,它确实没有真正改变游戏规则
lymnna712#
首先,HTML中没有left-value这样的属性,你必须在HTML中使用pre-build attr,因为它不是react。其次,如果你想左对齐,只需使用css的position和left attr,或者使用margin-left做一些样式。