html - CSS で属性の値を取得する

Question

私はこのHTMLコードを持っています:

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

CSS の幅を data-width 属性の値と同じに設定したい、たとえば次のようにします。

div {
    width: [data-width];
}

どこかでやってたのを見たけど思い出せない。ありがとう。

Answer 1

疑似型のコンテンツなしでデータ属性値を css に直接渡すことはできません。むしろ、この方法で行うことができます.. CHECK THIS 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;
}

Answer 2

インライン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>

Answer 3

私はこれを楽しんでいますが、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

---

一種の更新 幅プロパティに変数を渡したいので、探しているものではありません。この場合、クラスを使用することもできます。

HTML

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

CSS

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

スケッチはこちら: http://cdpn.io/jKDcH

Answer 4

CSS は、特定の html 要素に関する静的なスタイル設定情報であり、その逆ではありません。CSS を使用して div の幅を設定する場合は、クラスを使用することをお勧めします。

HTML:

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

CSS:

.foo {
    width: 70px;
}

jsフィドル

Answer 5

もう 1 つの方法は、CSS カスタム プロパティを style 要素と共に使用して、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>