data-*カスタムプロパティ

1750 ワード

  • 説明
  • HTML 5には、data-*カスタム属性という新しい機能カスタム属性が追加されました.H 5ではdata-を接頭辞として設定し,データ格納が可能である.
  • 高度なブラウザの場合、スクリプトによってデータ
  • をカスタマイズおよび格納することができる.
  • 列:
  •       
    sss
  • attributeメソッドを使用してdata-*カスタム属性の値にアクセス
  • ある属性値getAttribute
  • を得る
  • 属性setAttribute
  • を設定する
    sss
    var user = document.getElementById('user') var uid = user.getAttribute('data-uid')// data-uid console.log(uid) user.setAttribute('site','http://www.baidu.com')// site console.log(user.dataset.birth)
  • data-プロパティセレクタについて
  • は、カスタムdata属性に基づいて関連する要素
  • を選択することができる.
    //        'data-flowering'      
    document . querySelectorAll ( '[data-flowering]' ) ;
    //        'data-text-colour'     red   
    document . querySelectorAll ( '[data-text-colour="red"]' ) ;
    
  • 同様に、data属性値によって対応する要素にCSSスタイル
  • を設定することもできます.
     
     
    1
  • 命名規則
  • htmlではdata-*が属性
  • を直接命名する.
  • JSでは,アルパカネーミング方式で
  • を取得する.
  • ブラウザ互換性
  • Internet Explorer 11+
  • Chrome 8+
  • Firefox 6.0+
  • Opera 11.10+
  • Safari 6+