我有这个HTML代码:
<div data-width="70"></div>
我想在CSS中将它的宽度设置为等于data-width属性的值,例如:
div {
width: [data-width];
}
我看到这是在什么地方做的,但我不记得了。谢谢。
发布于 2013-08-19 01:13:10
发布于 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>
发布于 2013-08-18 23:19:05
CSS是关于特定html元素的静态样式信息,而不是相反。如果你想使用CSS来设置div的宽度,我建议你使用classes:
HTML:
<div class="foo"></div>
CSS:
.foo {
width: 70px;
}
https://stackoverflow.com/questions/18300536
复制相似问题