CSS値は、私はそれはあなたがCSS <code>content</code>を設定できるのと同じように属性HTML5の<code>data-</code>を使用して、CSS値を設定することができますどのような方法があるかどうかを知りたい

Question

width: attr(data-width); 

属性。現在は動作しません。

---

HTML

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

CSS属性セレクタと理論的に

div { width: attr(data-width) } 

Answer 1

、このような機能の予知は、確かに、あり欲しいものを取得するお手伝いをする必要があり、http://www.w3.org/TR/css3-values/#attr-notation

このfiddleは何が必要のように動作しますが、必要がありますを見て今はありません。

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

ただし、疑似要素でcontentの場合は機能しますが、

Answer 2

はい、私はこれをテストしていません。試してみてください。

[data-width="600px"] { 
width: 600px; 
} 

http://www.w3.org/TR/CSS2/selector.html#matching-attrsあなたは

Answer 3

あなたが作成することができますJavaScriptで後で自分のスタイルで使用できるいくつかのcss- rules、：

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

注：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擬似セレクターを作成します：これは、あなたの（または誰か）が望んでいるものではなく、おそらく参考になるものではありません。

Answer 4

現在、CSS3宣言のHTML5 data属性からいくつかの値を読み取ることができます。 CaioToOn's fiddleでは、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。