zoukankan      html  css  js  c++  java
  • H5对自定义属性的规定和添加获取自定义属性的方法

    H5对自定义属性的规定和添加获取自定义属性的方法

    元素属性那么多,如何区分是自带的属性还是默认的属性呢?
    H5规定自带的属性有个data- 前缀,如data-index="1",那么,如何设置和获取属性值呢,请看下文。
        <script>
            var divele = document.querySelector("div");
            //我们常用的添加和获取自定义属性
            divele.setAttribute("flag", 1);
            console.log(divele.getAttribute("flag"));
    
            //属性那么多,如何区分是自带的属性还是默认的属性呢?
            //H5规定自带的属性有个data- 前缀,如data-index="1"
            divele.setAttribute("data-index", 1);
            console.log(divele.getAttribute("data-index")); //兼容性比较好
            //H5新增的获取属性值得方法,元素对象.dataset.index, dataset是个自定义属性(规范的data-开头)的集合
            console.log(divele.dataset.index);
            //divele.dataset[`index`]   获取对象属性的第二种方式
            console.log(divele.dataset[`index`]);
    
            //问题来了,如果自定义属性被很多连接符拼接而成呢?
            divele.setAttribute("data-temp-name", 2);
            //获取的时候用驼峰法
            console.log(divele.getAttribute("data-temp-name")); //这种方式正常写
            console.log(divele.dataset.tempName);
            console.log(divele.dataset[`tempName`]);
        </script>
  • 相关阅读:
    subsonic资源聚合
    一些经典的框架
    小毛看传统图书行业
    商界传媒20092010 从容就业,激情创业(企业家走进北在)活动记
    Beijing Perl Workshop 2009
    智力更生小毛笔记&心得
    使用world 2007 或是windows live writer写blog的设置
    php技术准备
    我需要知道的技术常识
    重新分配ip
  • 原文地址:https://www.cnblogs.com/chq1234/p/11402334.html
Copyright © 2011-2022 走看看