2016-04-12 11 views
6

要素上では、データ属性を以下のように指定できます。カスタムデータ属性値をCSSで指定できますか?

<div data-widget-type="MyWidgetType1" data-property1="20" data-property2="test"> 
... 
</div> 

私はクラスでこれらをキャプチャしたいと考えています。

.MyClass1 { 
data-widget-type:"MyWidgetType1"; 
data-property1:"20"; 
data-property2:"test"; 
} 

<div class="MyClass1"> 
... 
</div> 

CSSにデータ属性値を指定する方法はありますか?

+1

いいえ、それはできません。 –

+0

@Stephan Muller CSSの良い拡張機能とは思いませんか? – Nitesh

答えて

1

いいえ、既定の属性でも(CSSで名前属性を設定できないなど)、このような機能はありません。しかし、あなたはこれらのカスタム属性を選択することができます。

.MyClass1[data-widget-type="MyWidgetType1"] 
+0

HTMLでこの属性を設定する方法が不明です。 –

+0

@ Mr.Alien何も設定しません。それは単なるCSSセレクタです。 CSSでDOM要素を操作することはできません – Justinas

+0

はい、できません。私は選択を質問の範囲にあるとは思わない。 :) –

1

これは、[属性]の値を使用してCSSのクラスを選択することは可能だが、私は、CSSはその属性を更新することができます信じていません。

https://css-tricks.com/almanac/selectors/a/attribute/

あなたはjQueryのソリューション、または類似を見つける必要があるだろう属性を更新します。

編集:

$("#fieldId").attr("attribute-name","value you want to set"); 
5

CSSはHTMLではありません:jQueryのでは、あなたがこのような属性を更新することができます。 CSSを使用してHTML属性の値を設定または変更することはできません。

さらに、なぜこれをやりますか?心配の分離のためにHTMLとCSSが存在します。 HTMLはコンテンツ用であり、CSSはプレゼンテーション用です。 CSSでデータ属性を指定することは、HTMLでプレゼンテーション属性を指定することと変わりありません。

メタデータをクラス名に割り当てようとすると、そのクラス名を持つすべての要素に適用されますが、それはCSSの範囲外であり、単純にHTMLでは不可能です。要素にメタデータを割り当てる唯一の方法は、その要素の属性としてメタデータを指定することです。 (マークアップ内のそのクラスのすべてのインスタンスで属性を指定する必要がない場合は、属性宣言をスクリプトに移動できますが、スクリプトは各要素のデータセットにこれらの値を設定する必要があります。必要に応じて、しかし、これは十分であろう)

+0

divにクラスを指定したいが、その後ブラウザ/ uaタイプのメディアクエリに基づいて全く異なるクラス定義をしたい。 – Nitesh

+1

次に、CSSを必要としないので、メディアクエリによって制御される属性が必要です。それらはHTMLにも存在しません - あなたはまだスクリプトが必要です。 – BoltClock

+0

CSSのカスタムプロパティはhttps://www.w3.org/TR/css-variables/にあります。問題のケースに使用できるかどうかを確認します。 – Nitesh

0

は、あなたの属性の値を取得する方法があるが、それはすべてのブラウザではサポートされていない:。

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

私はドン」これがあなたが探しているものか分かりません

+0

IE8 +で動作します。 –

関連する問題