3

HTML5 では、CSS セレクターは data-* 属性でうまく動作するようです。例えば：

<style>
div[data-foo='bar'] {
  background:#eee;
}
</style>
<div data-foo='bar'>colored</div>
<div>not colored</div>

最初の を適切にスタイルします。ただし、selectors-api を使用してそのような要素を選択しようとすると失敗します。例:

var foos = document.querySelectorAll("div[data-foo]='bar'");

また

var foos = document.querySelectorAll("div data-foo='bar'");

Chrome と Safari では、これにより不可解なエラーが発生します。

SYNTAX_ERR: DOM 例外 12

selectors-api を使用して data-* 属性に基づいて要素を適切に選択する方法について何か考えはありますか?

4

2 に答える 2

8

属性セレクターの構文は次のとおり[att=val]ですdiv[data-foo='bar']。

于 2010-04-19T05:58:28.003 に答える
2

アンは正しい。(幸いなことに、彼は関連する仕様の編集者の 1 人です。)

<!DOCTYPE html>
<style>
div[data-foo='bar'] {
  background:blue;
}
</style>
<div data-foo='bar'>colored</div>
<div>not colored</div>
<script>
var foos = document.querySelectorAll("div[data-foo='bar']");
alert(foos[0])
</script>

私にとってうまくいくのは、Firefox、Opera、および Chrome です。スクリプトで使用したdiv[data-foo='bar']ではなく、CSS で使用した であることに注意してください。div[data-foo]='bar'

于 2010-04-19T18:14:03.527 に答える