1 つの HTML「data-」要素に複数の値を設定できますか? 質問する

1 つの HTML「data-」要素に複数の値を設定できますか? 質問する

1 つの HTML "data-" 要素に複数の値を設定できますか? クラスに複数のクラス名を設定できるのと同様です。

可能であれば、1 つの「data-」要素を使用してすべてのライブラリ スタイルを格納する CSS/JS ライブラリを作成したいと思います。例:

<div data-library-name="xs-hidden col-md-10 col-xl-8 big-hero"></div>

こうすることで、プログラマーのカスタム スタイル ルールを elements クラスに組み込むことができます。これは読みやすくするためなので、次のようにまとめます。

<div class="custom-style another-style" data-library-name="xs-hidden col-md-10 col-xl-8 big-hero"></div>

ベストアンサー1

1 つの HTML「data-」要素に複数の値を設定できますか?

文字列を使用できます。仕様では、属性内のデータの特定の形式は定義されていません。サイト固有JavaScript。

クラスに複数のクラス名を付けることができるのと同様です。

class 属性は、スペースで区切られたクラスのリストを受け取ります。

your_data_attribute_value.split(" ");必要に応じてJavaScript でも可能です。

これをCSSで処理するには、~= 属性セレクタ

[att~=値]
att 属性を持つ要素を表します。この属性の値は、空白で区切られた単語のリストで、そのうちの 1 つは "val" です。"val" に空白が含まれている場合、何も表されません (単語はスペースで区切られているため)。また、"val" が空の文字列の場合も、何も表されません。

おすすめ記事