htmlのjavascriptのパラメータ

Question

として「データ - 」属性は、私がこれを持っているとしましょう。誰かが実用的な例を投稿できますか？

Answer 1

data-*属性を取得する最も簡単な方法は、element.getAttribute()である：

onclick="fun(this.getAttribute('data-uid'), this.getAttribute('data-name'), this.getAttribute('data-value'));" 

はDEMO：http://jsfiddle.net/pm6cH/

---

私はちょうどfun()にthisを渡し、そして3つの属性を取得することをお勧めしますが内部fun機能：

onclick="fun(this);" 

そして：

function fun(obj) { 
    var one = obj.getAttribute('data-uid'), 
     two = obj.getAttribute('data-name'), 
     three = obj.getAttribute('data-value'); 
} 

DEMO：http://jsfiddle.net/pm6cH/1/

---

プロパティでそれらにアクセスするための新しい方法がdatasetであるが、それはすべてのブラウザでサポートされていません。 。

this.dataset.uid 
// and 
this.dataset.name 
// and 
this.dataset.value 

DEMO：

data-name="bbb", 

： http://jsfiddle.net/pm6cH/2/

---

また、あなたのHTMLに、ここにカンマがあってはならないことに注意して、次のようにあなたはそれらを取得したいです

---

参考文献：

• element.getAttribute()：https://developer.mozilla.org/en-US/docs/DOM/element.getAttribute
• .dataset：https://developer.mozilla.org/en-US/docs/DOM/element.dataset
• .datasetブラウザの互換性：http://caniuse.com/dataset

Answer 2

HTML：

<div data-uid="aaa" data-name="bbb", data-value="ccc" onclick="fun(this)"> 

はJavaScript：

function fun(obj) { 
    var uid= $(obj).attr('data-uid'); 
    var name= $(obj).attr('data-name'); 
    var value= $(obj).attr('data-value'); 
} 

が、私はjQueryのを使用しています。