html data-xxxx 特性

>>>>>>>>>>>>>>>>>>>>>>>>>>>html data-xxxx  特性>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
<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-flowering' 属性的元素
document.querySelectorAll('[data-flowering]');
// 选择所有包含 'data-text-colour' 属性值为red的元素
document.querySelectorAll('[data-text-colour="red"]') ;
<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>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>