Получить значение атрибута в CSS

У меня есть этот код HTML:

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

Я хочу установить его ширину в CSS, равную значению атрибута ширины данных, например. что-то вроде этого:

div {
    width: [data-width];
}

Я видел, что это было сделано где-то, но я не помню. Спасибо.

Ответы

Ответ 1

Это то, что я искал:

https://developer.mozilla.org/en-US/docs/Web/CSS/attr

Проблема в том, что он не поддерживается даже некоторыми из основных браузеров, в данном случае Chrome.

Ответ 2

Вы не можете передавать значение атрибута данных непосредственно в css без содержимого псевдо-типа. Скорее вы можете сделать это. ПРОВЕРЬТЕ ЭТУ FIDDLE

<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;
}

Ответ 3

CSS - это информация о статическом стиле о конкретном элементе html, а не о другом. Если вы хотите использовать CSS для установки ширины вашего div, я предлагаю вам использовать классы:

HTML:

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

CSS

.foo {
    width: 70px;
}

jsFiddle

Ответ 4

Я просто развлекаюсь этим, но решение 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 sketch here: http://cdpn.io/otdqB

ВИД ОБНОВЛЕНИЯ Не то, что вы ищете, так как вы хотите передать переменную в свойство width. В этом случае вы также можете использовать класс.

HTML

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

CSS

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

Набросок здесь: http://cdpn.io/jKDcH