5

HTML5 には、data- プレフィックスを使用して要素にカスタム属性を設定する手段が含まれていることを知りました。ただし、javascript コード ブロック中にプロパティを読み取る方法に関しては、私は少し困惑しています。DOMStringMap がどのように機能しているかについての私の解釈だと思います。

次のサンプル html のプロパティを読み取る方法を単純化できますか。

<span data-complex-key="howtoRead" data-id="anId">inner</span>

次のことを試してみても、期待どおりに機能しません

spanEl.dataset['id']                    // straight-forward and result is anId
spanEl.dataset['complex-key']           // undefined
spanEl.dataset['complex']['key']        // throws 'cannot read property of undefined'
spanEl.getAttribute('complex-key')      // there's a null however,
spanEl.getAttribute('data-complex-key') // this variant seems to work

私が不思議に思うもう 1 つのことは、CSS セレクターは、私が DOM に記述したものとまったく同じパターンに従っているように見えることです。

たとえば、これは一致します

 span[data-complex-key="howtoRead"] { color:green }

HTML5 キャンバス、ビデオ、およびローカル データ ストレージにますます関心を寄せています:)

4

4 に答える 4

11

バニラJSではspanEl、DOMノードへの参照であると仮定します

spanEl.dataset.complexKey

データ属性にハイフン ( )がcamelCase含まれ、さらに-

spanEl.getAttribute('data-complex-key')

あなたがすでに気づいたようにうまくいきます。data補足として、jQueryでは、その属性にアクセスできます

$(spanEl).data("complex-key")
于 2012-09-26T16:35:38.013 に答える
2

Chrome では、データ キーをそれほど単純ではない方法でマッピングしているようです。

console.log(spanEl.dataset);​​​​​​​​​​​​​​
//shows:
//DOMStringMap
//  complexKey: "howtoRead"
//  id: "anId"

「complex-key」を「complexKey」に変換します。

完全に単純ではありませんが、この動作は HTML5 仕様で次のように定義されています。

http://dev.w3.org/html5/spec//global-attributes.html#dom-dataset

于 2012-09-26T16:50:15.703 に答える
1

ライブラリを使用していない場合、最初と最後の方法は正しいです。ただし、マイナス記号の付いたキーはキャメル ケースに変換されるため、complex-key は complexKey になります。

spanEl.dataset['id']
spanEl.dataset['complexKey']
spanEl.getAttribute('data-complex-key')

ただし、最後の 1 つだけが 9 までの IE で機能します (10 についてはわかりません)。この場合、データ属性は命名規則を持つ通常の属性に他なりません。

于 2012-09-26T16:50:31.280 に答える
0 
 spanEl.dataSet["complexKey"]

// jQueryを使用して、これを試すことができます

 $('span').data('complex-key')  // Will give you **howtoRead**

    $('span').data('id')  // Will give you **anId**
于 2012-09-26T16:36:53.283 に答える