web-dev-qa-db-ja.com

HTML5データ属性を使用したCSS値

width: attr(data-width);

Css contentを設定できるのと同じ方法で、HTML5のdata-属性を使用してcss値を設定できる方法があるかどうかを知りたい。現在は動作しません。

HTML

<div data-width="600px"></div>

CSS

div { width: attr(data-width) }
csshtml5attributes
98
James Kyle

確かに、そのような機能には、 http://www.w3.org/TR/css3-values/#attr-notation のような見方があります

この fiddle は必要なものと同じように機能するはずですが、今のところは機能しません。

残念ながら、それはまだドラフトであり、主要なブラウザに完全には実装されていません。

ただし、擬似要素のcontentに対しては機能します。

76
Caio Cunha

JavaScriptを使用してcss -rulesを作成し、後でスタイルで使用できます：http://jsfiddle.net/ARTsinn/vKbda/ =

var addRule = (function (sheet) {
    if(!sheet) return;
    return function (selector, styles) {
        if (sheet.insertRule) return sheet.insertRule(selector + " {" + styles + "}", sheet.cssRules.length);
        if (sheet.addRule) return sheet.addRule(selector, styles);
    }
}(document.styleSheets[document.styleSheets.length - 1]));

var i = 101;
while (i--) {
    addRule("[data-width='" + i + "%']", "width:" + i + "%");
}

これにより、次のような100個の擬似セレクターが作成されます。

[data-width='1%'] { width: 1%; }
[data-width='2%'] { width: 2%; }
[data-width='3%'] { width: 3%; }
...
[data-width='100%'] { width: 100%; }

注：これは少しオフトピックであり、実際にあなた（または誰か）が望んでいるものではありませんが、役に立つかもしれません。

9
yckart

今日の時点で、CSS3宣言のHTML5 data属性からいくつかの値を読み取ることができます。 CaioToOnのフィドル では、CSSコードはdataプロパティを使用してcontentを設定できます。

残念ながら、widthおよびheight（Googleでテスト済みChrome 35、Mozilla Firefox 30およびInternet Explorer 11では動作しません）.

しかし、data-widthおよびdata-heightのサポートを提供するFabrice Weinbergの CSS3 attr（）Polyfill があります。 GitHubのレポジトリは cssattr.js にあります。

7
Benny Neugebauer