42

我有这个 HTML 代码:

<div data-width="70"></div>

我想在 CSS 中设置它的宽度等于 data-width 属性的值,例如这样的:

div {
    width: [data-width];
}

我看到这是在某个地方完成的,但我不记得了。谢谢。

4

8 回答 8

60

您需要CSSattr功能

div {
    width: attr(data-width);
}

问题是(截至 2021 年)甚至一些主要浏览器(在我的情况下为 Chrome)都不支持它:

在此处输入图像描述

于 2013-08-18T17:13:09.943 回答
15

如果没有伪类型内容,您不能将数据属性值直接传递给 css。相反,你可以这样做..检查这个小提琴

<div data-width="a"></div><br>
<div data-width="b"></div><br>
<div data-width="c"></div>

CSS

div[data-width="a"] {
    background-color: gray;
    height: 10px;
    width:70px;
}
div[data-width="b"] {
    background-color: gray;
    height: 10px;
    width:80px;
}
div[data-width="c"] {
    background-color: gray;
    height: 10px;
    width:90px;
}
于 2013-08-18T15:33:30.783 回答
8

内联CSS 变量几乎与数据属性一样具有声明性,并且attr(). 看一下这个:

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>

于 2019-11-10T00:29:03.390 回答
1

CSS 是关于特定 html 元素的静态样式信息,而不是相反。如果您想使用 CSS 设置 div 的宽度,我建议您使用类:

HTML:

<div class="foo"></div>

CSS:

.foo {
    width: 70px;
}

jsFiddle

于 2013-08-18T15:19:05.477 回答
1

我只是玩得开心,但是 jQuery 解决方案是这样的:

HTML

<div class='foo' data-width='70'></div>
<div class='foo' data-width='110'></div>
<div class='foo' data-width='300'></div>
<div class='foo' data-width='200'></div>

CSS

.foo {
  background: red;
  height: 20px;
  margin-bottom: 10px;
  width: 0; /** defaults to zero **/
}

jQuery

$(document).ready(function(){
  $('.foo').each(function(i) {
    var width = $(this).data('width');
    $(this).width(width);
  });
});

Codepen 草图在这里:http ://cdpn.io/otdqB


一种更新 不是您要查找的内容,因为您想将变量传递给 width 属性。在这种情况下,您不妨使用一个类。

HTML

<div data-width='70'>Blue</div>

CSS

div[data-width='70'] {
  width: 70px;
}

在这里素描:http: //cdpn.io/jKDcH

于 2013-08-18T15:44:38.397 回答
0

另一种方法是使用带有样式元素的CSS 自定义属性将值从 HTML 传递到 CSS。

div {
  width: var(--width);
  height: var(--height);
  background-color: var(--backgroundColor);
}
<div
  style="
    --width: 50px;
    --height: 25px;
    --backgroundColor: #ccc;
  "
></div>

<div
  style="
    --width: 100px;
    --height: 50px;
    --backgroundColor: #aaa;
  "
></div>

于 2020-04-07T09:06:29.140 回答
0

<div data-width="70"></div>

使用 `attr()` 获取属性的值;

div {
    width: attr(data-width);
}
于 2021-02-20T23:25:30.437 回答
-2

你能试试这个吗

 $(function(){
    $( "div" ).data( "data-width" ).each(function(this) {

        $(this).width($(this..data( "data-width" )))

    });
 });
于 2019-11-18T09:24:32.123 回答