HTML 5のdata-*カスタム属性

HTML 5に追加された新しい機能は、カスタムデータ属性、すなわちdata-*カスタムプロパティです.HTML 5では、data-を接頭辞として、必要なカスタム属性を設定して、いくつかのデータの保存を行うことができます.もちろん、高度なブラウザでは、スクリプトによる定義とデータアクセスが可能です.プロジェクトの実践に非常に役立ちます.
たとえば

<div id = "user" uid = "12345" uname = "    " > </div>

<script>

//   getAttribute   data-   

var user = document . getElementById ( 'user' ) ;

var userName = plant . getAttribute ( 'uname' ) ; // userName = '    '

var userId = plant . getAttribute ( 'uid' ) ; // userId = '12345'

 

//   setAttribute   data-   

user . setAttribute ( 'site' , 'http://www.css88.com' ) ;

</script>

この「オリジナル」のカスタム属性は、上のdata-*カスタム属性と変わらず、知識属性名が異なります.
 
Datasetプロパティdata-*カスタムプロパティの値へのアクセス
この方法は、1つの要素のdataset属性にアクセスすることによってdata-*カスタム属性の値にアクセスする.このdataset属性は、HTML 5 JavaScript APIの一部であり、選択要素data-属性のすべてのDOMStringMapオブジェクトを返すために使用されます.
この方法を使用する場合、data-uidなどの完全な属性名を使用してデータにアクセスするのではなく、data-接頭辞を削除する必要があります.
また、data-属性名にハイフンが含まれている場合、例えばdata-date-of-birthはハイフンが削除され、アルパカ式のネーミングに変換され、前の属性名が変換された後はdateOfBirthであるべきである.

<div id="user" data-id="1234567890" data-name="    " data-date-of-birth>  </div>

<script type="text/javascript">

var el = document.querySelector('#user');

console.log(el.id); // 'user'

console.log(el.dataset);//  DOMStringMap

console.log(el.dataset.id); // '1234567890'

console.log(el.dataset.name); // '    '

console.log(el.dataset.dateOfBirth); // ''

el.dataset.dateOfBirth = '1985-01-05'; //   data-date-of-birth  .

console.log('someDataAttr' in el.dataset);//false

el.dataset.someDataAttr = 'mydata';

console.log('someDataAttr' in el.dataset);//true

</script>

もしあなたがdata- を削除したいなら、そうすることができます:delete el. dataset . id ;あるいはel.dataset . id = null ;  .
美しく見えますが、残念なことに、新しいdataset属性はChrome 8+Firefox(Gecko)6.0+Internet Explorer 11+Opera 11.10+Safari 6+ブラウザでのみ実現されるので、その間はgetAttributeとsetAttributeで操作するのがベストです.
 
data-プロパティセレクタについて
実際に開発すると、カスタムdata-のプロパティに基づいて関連する要素を選択することができます.たとえばquerySelectorAllを使用して要素を選択します.

//        'data-flowering'      

document . querySelectorAll ( '[data-flowering]' ) ;

 

//        'data-text-colour'     red   

document . querySelectorAll ( '[data-text-colour="red"]' ) ;

また、次の例のように、data-属性値を使用して、対応する要素に対してCSSスタイルを設定することもできます.

<style type ="text/css">

    .user {

         width : 256px ;

         height : 200px ;

     }

 

     .user[data-name='feiwen'] {

         color : brown

     }

 

     .user[data-name='css'] {

         color : red

     }

</style>

<div class = "user" data-id = "123" data-name = "feiwen" > 1 </div>

<div class = "user" data-id = "124" data-name = "css" >    </div>

 
 
転載:http://www.css88.com/archives/4715