获取CSS中的属性值
获取CSS中的属性值
提问于 2013-08-18 23:15:00
我有这个HTML代码：
<div data-width="70"></div>我想在CSS中将它的宽度设置为等于data-width属性的值，例如：
div {
width: [data-width];
}我看到这是在什么地方做的，但我不记得了。谢谢。
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-08-19 01:13:10
Stack Overflow用户
发布于 2019-11-10 08:29:03
内联CSS variables几乎和数据属性一样具有声明性，与attr()相比，它们现在是widely supported。看看这个：
var elem = document.getElementById("demo");
var jsVar = elem.style.getPropertyValue("--my-var");
function next() {
jsVar = jsVar % 5 + 1; // loop 1..5
elem.style.setProperty("--my-var", jsVar);
}.d1 {
width: calc( var(--my-var) * 100px );
background-color: orange;
}
.d2 {
column-count: var(--my-var);
}<button onclick="next()">Increase var</button>
<div id="demo" style="--my-var: 2">
<div class="d1">CustomWidth</div>
<div class="d2">custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number custom columns number</div>
</div>
Stack Overflow用户
发布于 2013-08-18 23:19:05
CSS是关于特定html元素的静态样式信息，而不是相反。如果你想使用CSS来设置div的宽度，我建议你使用classes：
HTML：
<div class="foo"></div>CSS：
.foo {
width: 70px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18300536
复制相关文章
相似问题