您的位置:首页 > Web前端 > 其它 > 正文

html5 data属性

更多 时间:2015-7-5 类别:Web前端 浏览量:1332

html5 data属性

html5 data属性

HTML5规范里增加了一个自定义data属性,这个自定义data属性的用法非常的简单, 就是你可以往HTML标签上添加任意以 "data-"开头的属性, 这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的.

一、html5中data-*属性的定义

1、data-* 属性用于存储页面或应用程序的自定义数据。

2、data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

3、存储的(自定义)数据能够被页面的 JavaScript 中利用,以创建更好的用户体验。

二、data-* 属性包括两部分

1、属性名不应该包含任何大写字母,并且在前缀 "data-" 之后必须有至少一个字符

2、属性值可以是任意字符串

三、dataset对象的介绍

  •  
  • 
    <li id="day2-meal-expense"
      data-drink="coffee"
      data-food="sushi"
      data-meal="lunch">¥20.12</li>
    
    		
  • 要想获取某个属性的值,可以像下面这样使用dataset对象

  •  
  • 
    var expenseday2 = document.getElementById('day2-meal-expense');
    var typeOfDrink = expenseday2.dataset.drink;
    
    		
  • 需要注意的是带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor。例如,假设上面的例子中现在有如下data属性,data-meal-time,则我们要获取相应的值可以使用:

    expenseday2.dataset.mealTime

    四、获取自定义属性

    1、获取时通过dataset对象,使用"."来获取属性,需要去掉data-前缀

    <li id='test' data-age="23">html5 data-*自定义属性 data-age</li>

    2、jquery获取

  • 
    $('#test').data('age');
    
    		
  • 五、获取带连字符的自定义属性

    1、遇到自定义属性中有连字符需要转化为驼峰命名

    <li id='test' data-user-list="user-list">html5 data-*自定义属性data-user-list属性</li>

    2、jquey获取

  • 
    $('#test').data('userList');
    
    		
  • 六、动态设置data-*自定义属性值

  • 
    $('#content').data('name','starof');
    
    		
  • 网页被修改为

    <li id="test" data-user-list="user-list" data-name="starof">html5 data-*自定义属性data-user-list属性</li>

    七、HTML5使用data-* 要注意的地方

    1、data-其后的属性名命名,发现如果为大写字母,则会转为 “-” + “小写字母”

    DOM.dataset.newAttrHaha 将会转换为属性“data-new-attr-haha”

    2、使用setAttribute定义的属性,如果中间包含”-”,转换规则有所不同,中间所有大写字母均转换为小写之母

    (1)、DOM.setAttribute("data-newAttr2-abc", "22222") ==>  data-newattr2-abc=”2222”,获取它可以使用getAttribute(‘设定时的名称’)

    (2)、DOM.getAttribute(“data-newAttr2-abc”)或是DOM.dataset.newattr2Abc获取。获取则刚好相反 “-” + “小写”==》“大写”,如果是“-”+ “数字”,则保持原样不变

    3、设置属性时尽量使用setAttribute(“data-xxx”),其中属性命名最好不要有大写的出现,避免出现“-”,推荐使用“char_char”,如:“favo_obj_id”

    标签:HTML5
    您可能感兴趣