• 技术文章 >web前端 >前端问答

    html5自定义属性什么用

    青灯夜游青灯夜游2022-08-01 17:02:43原创176

    html5自定义属性“data-*”用于存储私有页面后应用的自定义数据,而自定义的数据可以让页面拥有更好的交互体验(不需要使用Ajax或去服务端查询数据),语法“<element data-*="指定属性值(一个字符串)">”;“data-*”属性由两部分组成:1、属性名不要包含大写字母,在“data-”后必须至少有一个字符;2、属性值,该值可以是任何字符串。

    本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

    html5自定义属性data-*

    data-* 属性用于存储私有页面后应用的自定义数据,是 HTML5 新增的属性。

    <element data-*="somevalue">

    data-* 属性可以在所有的 HTML 元素中嵌入数据。

    自定义的数据可以让页面拥有更好的交互体验(不需要使用 Ajax 或去服务端查询数据)。

    data-* 属性由以下两部分组成:

    注意: 自定义属性前缀 "data-" 会被客户端忽略。

    利用dataset可以获取data-属性构造的对象,该方法目前只能在Chrome 、Opera等部分浏览器中实现,其他浏览器如需获取其属性值需要使用getAttribute和setAttribute来操作。

    只要在标签里面以”data-”为前缀定义我们的自定义属性就可以用来进行一些数据的存放。

    <div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

    这个data属性还可以应用在CSS中,前提是你的浏览器支持after伪类,以及content的attr属性(低版本的IE不支持):

    <div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>
    #myDiv{
      position: ralative;
    }
     
    #myDiv:hover:after{
      position: absolute;
      top: 0px;
      left: 0px;
      content: attr(data-attribute);
      color: red;
    }

    如何获取data属性的值?

    <div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

    1、使用getAttribute来获取

    var myDiv = document.getElementById("myDiv");
    var theValue = myDiv.getAttribute("user-defined-attribute");

    2、使用Html5自定义属性对象Dataset来获取

    var myDiv = document.getElementById("myDiv");
     
    var theValue = myDiv.dataset.attribute;

    注意:带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor。例如data属性为data-other-attribute,则我们要获取相应的值可以使用:myp.dataset.otherAttribute

    如果Html元素定义了多个自定义属性,如何获取?

    <div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

    1、使用循环遍历

     var myDiv = document.getElementById("myDiv");
    var attrs = myDiv.attributes,
    var expense = {}, i, j;  
    for (i = 0, j = attrs.length; i < j; i++) {
      if(attrs[i].name.substring(0, 5) == 'data-') {
        expense[attrs[i].name.substring(5)] = attrs[i].value;
      }
    }

    2、使用dataset属性

    var expense = document.getElementById('myDiv').dataset;

    注:dataset并不是典型意义上的JavaScript对象,而是个DOMStringMap对象DOMStringMap是HTML5一种新的含有多个名-值对的交互变量

    1)、让所有的自定义的属性值塞到一个数组中

    var chartInput = [];
     
    for (var item in expense) {
      chartInput.push(expense[item]);
    }

    2)、删掉一个data属性

    delete myDiv.dataset.attribute;

    3、增加一个data属性

    myDiv.dataset.attribute4 = 'value4';

    dataset的兼容性处理

    如果浏览器不支持dataset,有必要做一下兼容处理:

    if(myDiv.dataset) {
      myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
      var theValue = myDiv.dataset.attribute; // 获取自定义属性
    } else {
      myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
      var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
    }

    结语:

    使用dataset操作data 要比使用getAttribute速度稍微慢些,虽然使用dataset不能提高代码的性能,但是对于简洁代码,提高代码的可读性和可维护性是很有帮助的。

    【推荐课程:HTML5视频教程web前端

    以上就是html5自定义属性什么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:css和html5是什么 下一篇:HTML5包含哪两种标签
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 织梦调用文章列表时候怎么判断文章自定义属性• 小程序自定义属性怎么获取的• 关于html5中自定义属性的介绍• 浅析HTML5中使用data-*来自定义属性• javascript如何给元素添加自定义属性• vuejs如何自定义属性• jquery可以获得自定义属性吗
    1/1

    PHP中文网